Divider
Divide the content area and separate the modules.
Install
npm install @arco-design/web-react@2.66.18
Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.
Examples
- Basic: Can be used to separate paragraphs of different chapters. The default is a horizontal dividing line. Text can be added within divider.
- With Text: Specify the position of the texts within divider by
orientation. - Vertical divider: Specify
typeasverticalto make it vertical. Vertical dividers can't contain texts.
Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.
API
Divider
| Property | Description | Type | DefaultValue |
|---|---|---|---|
| orientation | The position of description content in Divider | 'left' | 'right' | 'center' | center |
| type | Two types are available: horizontal and vertical | 'horizontal' | 'vertical' | horizontal |
| className | Additional css class | string | string[] | - |
| style | Additional style | CSSProperties | - |