Bar is component to create horizontal flexible width layouts.
Example
white
Item
Filling Item
Item
Variants
Basic
white
Item
Second item
Third item
Spaceing
white
Default
Second item
Third item
Small
Second item
Third item
Alignment
white
Top
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, ipsum deleniti quia iure similique mollitia quam excepturi laudantium architecto, aperiam magnam exercitationem magni commodi laborum molestiae dolore. Corrupti, officia perferendis?
Item
Middle
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, ipsum deleniti quia iure similique mollitia quam excepturi laudantium architecto, aperiam magnam exercitationem magni commodi laborum molestiae dolore. Corrupti, officia perferendis?
Item
Bottom
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, ipsum deleniti quia iure similique mollitia quam excepturi laudantium architecto, aperiam magnam exercitationem magni commodi laborum molestiae dolore. Corrupti, officia perferendis?
Item
Vertical bar
white
Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, incidunt veniam minima quasi eligendi amet ullam explicabo laborum aperiam accusantium hic laboriosam doloremque expedita odit ex consequatur voluptas aliquid soluta.
Item
Responsive bar (vertical/horizontal)
white
Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus soluta voluptatum magni, consequuntur quia odio ad est dicta consequatur, nobis modi omnis qui quam magnam ab quo, similique quae itaque.
Item
Item filling space
white
Item
Second filling item
Third item
Item which can shrink
white
Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium deleniti dignissimos recusandae nesciunt perferendis cupiditate perspiciatis harum odit eaque aspernatur dolorem rerum ratione repudiandae qui alias assumenda saepe, atque reiciendis?
Bar layout direction. Direction can take enum value or media object.
```js
{
xl: [direction],
l: [direction],
m: [direction],
s: [direction],
xs: [direction]
}
```
space
getResponsivePropType(oneOf(["small"]))
Space between items (vertical and horizontal - depends on direction). Space can take enum value or media object.
```js
{
xl: [space],
l: [space],
m: [space],
s: [space],
xs: [space]
}
```
<BarItem />
Prop
Type
Default
Description
canShrink
bool
Bar item could shrink and wrap content if there is not enough empty space
isFilling
bool
Bar item should fill empty space
Accessibility
The Bar component is primarily used for layout, and as such, should not have any impact on accessibility.
Beware however when you are using it for layouts inside inline elements such as form labels. <Bar/> and <BarItem/> benefit from the tag prop to render any html element you want it to.
Aliases
<BarVertical/>===<Bardirection="vertical"/>
When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.
