Divider

区隔内容的分割线

基本用法

通过 type 属性决定分割线是水平还是垂直，默认水平：

function App() {
  return (
    <div className="ykui-demo-column">
        <Divider type='horizontal' />
        <Divider />
        <Divider type='vertical' />
    </div>
  )
}

虚线设置

通过 dashed 判断分割线是实线还是虚线，默认实线：

function App() {
  return (
    <div className="ykui-demo-row">
        <Divider dashed />
        <Divider />
    </div>
  )
}

标题以及标题位置设置

通过 children 属性控制嵌套的标题，通过orientation 来确定嵌套标题的位置，默认居中：

function App() {
  return (
    <div className="ykui-demo-column">
        <Divider >文字显示分割线</Divider>
        <Divider orientation='left'>文字居左分割线</Divider>
        <Divider orientation='right'>文字居右分割线</Divider>
    </div>
  )
}

分割线间距设置

通过 orientationMargin 属性控制分割线间距，orientation 必须为 left 或 right：

function App() {
  return (
    <div className="ykui-demo-column">
        <Divider orientation='left' orientationMargin='100' >文字居左100px间距分割线</Divider>
        <Divider orientation='right' orientationMargin={100}>文字居右100px间距分割线</Divider>
    </div>
  )
}

分割线颜色设置

通过 borderColor 属性控制分割线颜色：

function App() {
  return (
    <div className="ykui-demo-column">
        <Divider  borderColor='#000000'>分割线颜色设置</Divider>
    </div>
  )
}

API

属性	说明	类型	默认值
children	嵌套标题	ReactNode	--
type	分割线类型	horizontal〡vertical	horizontal
orientation	标题位置	left〡right〡center	center
orientationMargin	分割线间距	number〡string	0
dashed	分割线样式	boolean	false
style	分割线样式	CSSProperties	--
borderColor	分割线颜色	string	#cccccc