Skip to content

Divider 分割线

用于分隔不同内容区域。

基础用法

tsx
import { Divider } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <p>上方内容</p>
      <Divider />
      <p>下方内容</p>
    </>
  )
}

虚线

tsx
import { Divider } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <p>上方内容</p>
      <Divider dashed />
      <p>下方内容</p>
    </>
  )
}

带文字

tsx
import { Divider } from '@airo-ui/react'

function Demo() {
  return (
    <>
      <p>上方内容</p>
      <Divider>中间文字</Divider>
      <p>下方内容</p>
    </>
  )
}

API

Props

名称类型默认值说明
dashedbooleanfalse是否虚线
childrenReactNode分割线中间的文字内容

MIT License