划分内容区域,对模块做分隔。
基本用法
分割线的基本用法
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