A divider line separates different content.
Divider
import { Divider } from '@yuntijs/ui';A divider line separates different content.
import { Divider } from '@yuntijs/ui';based on antd Divider component.
import { Divider } from '@yuntijs/ui';
export default () => {
return (
<Divider
mode="expanded"
defaultOpen={true}
content={
<div>
The YuntiUI components are inspired by LobeUI and developed based on Antd components,
fully compatible with Antd components, and it is recommended to use antd-style as the
default css-in-js styling solution.
</div>
}
iconPlacement="left"
orientation="left"
orientationMargin={0}
dashed={true}
>
YuntiUI
</Divider>
);
};| Name | Description | Type | Default |
|---|---|---|---|
| prefixCls | -- | string | -- |
| type | -- | "vertical"|"horizontal" | -- |
| orientation | -- | "start"|"end"|"left"|"right"|"center" | "center" |
| orientationMargin | -- | string|number | -- |
| className | -- | string | -- |
| rootClassName | -- | string | -- |
| children | -- | ReactNode | -- |
| dashed | -- | boolean | -- |
| variant | -- | "dashed"|"solid"|"dotted" | "solid" |
| style | -- | {} | -- |
| size | -- | "small"|"middle"|"large" | -- |
| plain | -- | boolean | -- |
| mode | type of the divider | "default"|"line"|"expanded" | "default" |
| defaultOpen | Default whether to expand. This parameter is available only when mode is expanded | boolean | "false" |
| content | Expand content. This parameter is available only when mode is expanded | ReactNode | "-" |
| iconPlacement | The position of icon. This parameter is available only when mode is expanded and default | "left"|"right" | "left" |
| openIcon | custom open icon. This parameter is available only when mode is expanded | ReactNode | "-" |
| closeIcon | custom close icon. This parameter is available only when mode is expanded | ReactNode | "-" |