Skip to content
iuiDesign
100%
02:32
本页目录

划分内容区域,对模块做分隔。

基本用法

分割线的基本用法

html
<text>Note that this is a message. </text>
<iui-divider></iui-divider>
<text>Note that this is a message. </text>
<text>Note that this is a message. </text>
<iui-divider></iui-divider>
<text>Note that this is a message. </text>

带文字的分割线

带有文字的分割线,可以通过 align 属性来设置文字的位置。

html
<text>Note that this is a message. </text>
<iui-divider align="start"> Text </iui-divider>
<text>Note that this is a message. </text>
<iui-divider> Text </iui-divider>
<text>Note that this is a message. </text>
<iui-divider align="end"> Text </iui-divider>
<text>Note that this is a message. </text>
<iui-divider align="start"> Text </iui-divider>
<text>Note that this is a message. </text>
<iui-divider> Text </iui-divider>
<text>Note that this is a message. </text>
<iui-divider align="end"> Text </iui-divider>

竖直分割线

通过 direction 属性可以设置分割线的方向。

html
<view style="display: flex; justify-content: space-around">
  <text>Item 1</text>
  <iui-divider direction="vertical"> </iui-divider>
  <text>Item 2</text>
  <iui-divider direction="vertical"> </iui-divider>
  <text>Item 3</text>
</view>
<view style="display: flex; justify-content: space-around">
  <text>Item 1</text>
  <iui-divider direction="vertical"> </iui-divider>
  <text>Item 2</text>
  <iui-divider direction="vertical"> </iui-divider>
  <text>Item 3</text>
</view>

API

<Divider>props
参数描述类型默认值
direction分割线方向horizontal | verticalhorizontal
align分割线文字位置start | center | endcenter
type分割线类型solid | dashed | dottedsolid
size分割线宽度/高度Number1
margin分割线外边距[Number, String]20
textBg分割线文字背景色Stringwhite