import { Meta, Story, ArgTypes, Source } from '@storybook/addon-docs/blocks'; import * as Stories from './divider.stories.tsx'; import Default from './examples/default-divider.tsx?raw'; import MergeClassName from './examples/merge-classname.tsx?raw'; import VerticalDiv from './examples/vertical-div.tsx?raw'; import VerticalStyleOverride from './examples/vertical-style-override.tsx?raw';
The @bento/divider package exports the Divider component, which provides a stylable and accessible <hr> element which can be oriented horizontally or vertically to visually and semantically separate content.
npm install --save @bento/dividerThe @bento/divider package exports the Divider component:
The following properties are available to be used on the Divider component:
The orientation prop allows you to specify the orientation of the divider. It can be set to either horizontal or vertical. The default value is horizontal.
The Divider component adds the data-override data attribute to the rendered element when the component has been overridden by a custom className or style respectively. For example, if you override the Divider component with a custom className, the rendered element will have a data-override attribute set to "classname". This allows you to easily identify when the component has been overridden and apply custom styles or behavior accordingly.
The Divider component automatically handles accessibility features:
- ARIA Attributes/Screen Reader Support: Automatically applies
aria-orientationto indicate visual orientation to assistive technologies. - Semantic HTML: Uses the
<hr>element to convey the semantic purpose of the rendered element to screen readers.
You can customize the Divider component by providing your own class names, styles, or by wrapping your Divider in another styled component.
The best way to style the Divider component is to add your own className to the component and then use that class to style the divider. The Divider component won't automatically merge your class with the default styles. You will need to provide a render function to achieve this, as shown below.
This will add a data-override='classname' attribute to the rendered element.
You can also add your own styles to the Divider component by using the style prop. This allows you to override the default styles of the divider and will add a data-override='style' attribute to the rendered element.
You can also wrap the Divider component in another styled component to apply your own styles. This allows you to have more control over the styling of the divider and will not require you to merge class names or styles.