Divider
Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.
Simple Divider
Create a divider using the Divider
component.
import { Divider } from "@react-md/core/divider/Divider";
import { type ReactElement } from "react";
export default function SimpleDivider(): ReactElement {
return <Divider />;
}
Customizing Divider
The color can be configured by the core.$divider-light-theme-color /
core.$divider-dark-theme-color / core.$divider-color Sass variables
or the --rmd-divider-color
custom property. The default behavior will be to
use the correct light or dark theme color.
The height can be configured by the core.$divider-size Sass variable or using the core.divider-set-var(size, NEW_SIZE) mixin.
The spacing around the divider can be configured by the core.$divider-spacing Sass variable or using the core.divider-set-var(spacing, NEW_SIZE) mixin.
Here is some text to separate.
Second paragraph of text.
Inset Divider
Enable the inset
prop to apply additional margin-left
so it is inset with a
list of items. The inset amount can be configured by the
core.$divider-inset Sass variable or using the
core.divider-set-var(inset, NEW_VALUE) mixin.
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
Vertical Divider
A divider can be rendered vertically instead of horizontally by enabling the
vertical
prop.
The height will be set to 100%
but can be configured by setting the height
through CSS or applying a new max-size
using the
core.divider-set-var(max-size, NEW_SIZE) mixin.
The width will be set to core.$divider-size but can be configured by
setting the width
through CSS or applying a new size
using the
core.divider-set-var(size, NEW_SIZE) mixin.
The margin can be configured by the core.$divider-vertical-spacing Sass variable or using the core.divider-set-var(vertical-spacing, NEW_SIZE) mixin.