AppBar

The Button component builds on the Paper, Color and Container components for component

Props

Props of the Paper | Color | Container components are also available.

Name	Type	Default	Description
children	node		The content of the component.
Component	element type		The component used for the root node. Either a string to use a HTML element or a component.
color	string - default, paper1, paper2, ...theme colors	paper1	The color to use from presets of the theme
size	string - none, small, appbar, default, large, extra-large	appbar	Set padding from presets were specified in the theme.
stickyClassName	string	default className for sticky	Add this className to element style classList instead of default className when the appBar is sticky
stickyRemoveClassName	string		Remove this className from element style classList when the appBar is sticky

The ref is forwarded to the root Paper element.

Examples

Custom sticky style

style.css

.customStickyStyle {
    box-shadow: var(--digby-shadow-color) var(--digby-shadow-24);
}

jsx

Custom sticky style use global componentsStyle, remove default color with stickyRemoveClassName and add sticky color with stickyClassName.

const themeContext = useContext(ThemeContext);
const {componentsStyle} = themeContext;

const stickyClassNameForPaper1AppBar = clsx(
    componentsStyle['color-paper2']
);

const stickyRemoveClassNameForPaper1AppBar = clsx(
    componentsStyle['color-paper1'],
)

jsx

Same just with gradient.

const themeContext = useContext(ThemeContext);
const {componentsStyle} = themeContext;

const stickyClassNameForPrimaryAppBar = clsx(
    componentsStyle['color-primary-hover'],
);

const stickyRemoveClassNameForPrimaryAppBar = clsx(
    componentsStyle['color-primary'],
)

jsx

A React based UI kit for DIGBY Design

AppBar

Props

Examples

ver: iyx6hb