Bar

The e-bar is a horizontal bar that can be used to group buttons, tabs, or other components.

Props

Explore the available props for the form component

Property	Description	Type	Default
absolute	If true, the component will be positioned absolutely.	boolean	false
dense	Reduces the height of the component.	boolean	false
outlined	Displays an outlined version of the component.	boolean	false
clipped	If true, causes the component to be placed above the drawer if one exists in the layout	boolean	false
color	Applies specified color to the component - supports only utility colors (for example `primary` or `secondary`)	string	primary
height	Sets the height of the bar. By default, the bar has a height of 48px. You can set this property to a number or a string with a valid CSS unit.	string number	undefined
fixed	If true, the bar will be fixed to the top of the viewport and never scroll with its content.	boolean	false
depressed	Remves the box shadow effect from the bar.	boolean	false
app	Applicable only when the component is a direct child of the e-app component, it allows the component to be integrated as part of the application layout	boolean	false

SASS Variables

Name	Default
$e-bar-padding-y	0px !default;
$e-bar-padding-x	16px !default;
$e-bar-heigth	64px !default;
$e-bar-heigth--dense	48px !default;
$e-bar-box-shadow	0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !default;