Divider

用于内容区域的视觉分隔符，支持可选的文本标签。

导入

import { Divider } from 'asterui'

示例

基础分隔符

简单的水平分隔符。

</>

Content above the divider

Content below the divider

import { Divider } from 'asterui'

function App() {
  return (
      <div>
        <p>Content above the divider</p>
        <Divider />
        <p>Content below the divider</p>
      </div>
    )
}

export default App

带文本

带文本标签的分隔符。

</>

Section 1 content

OR

Section 2 content

import { Divider } from 'asterui'

function App() {
  return (
      <div>
        <p>Section 1 content</p>
        <Divider>OR</Divider>
        <p>Section 2 content</p>
      </div>
    )
}

export default App

文本位置

将文本定位在开始、中心或结尾。

</>

Start

Center

End

import { Divider, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md" className="w-full">
        <Divider position="start">Start</Divider>
        <Divider position="center">Center</Divider>
        <Divider position="end">End</Divider>
      </Space>
    )
}

export default App

垂直分隔符

用于内联内容的垂直分隔符。

</>

Home

Products

About

import { Divider } from 'asterui'

function App() {
  return (
      <div className="flex items-center h-8">
        <span>Home</span>
        <Divider orientation="vertical" />
        <span>Products</span>
        <Divider orientation="vertical" />
        <span>About</span>
      </div>
    )
}

export default App

颜色

不同颜色类型的分隔符。

</>

Primary

Secondary

Accent

import { Divider, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md" className="w-full">
        <Divider type="primary">Primary</Divider>
        <Divider type="secondary">Secondary</Divider>
        <Divider type="accent">Accent</Divider>
      </Space>
    )
}

export default App

API

Divider

属性	描述	类型	默认值
children	分隔符中的文本或内容	React.ReactNode	-
orientation	分隔符方向	'horizontal' | 'vertical'	'horizontal'
position	文本位置	'start' | 'center' | 'end'	'center'
type	颜色类型	'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'info' | 'error'	-
className	额外的 CSS 类名	string	-