Divider 分隔符

用于显式地分隔内容区域。

基础用法

使用 NueDivider 组件来分隔内容区域。

通过 direction 属性设置分隔符的方向，可选值为 horizontal* 和 vertical。

• * 表示属性默认值。

TIP

水平分隔符用于分割垂直排列的区域，而垂直分隔符用于分割水平排列的区域。

<template>
    <nue-div align="center">
        <nue-button>按钮</nue-button>
        <nue-divider direction="vertical" />
        <nue-button>按钮</nue-button>
    </nue-div>
</template>

设置分隔符文本及其对齐方式

设置分隔符文本

通过 text 属性设置分隔符的文本内容。

<template>
    <nue-div vertical>
        <nue-button>按钮</nue-button>
        <nue-divider text="文字" />
        <nue-button>按钮</nue-button>
    </nue-div>
</template>

设置分隔符对齐方式

通过 align 属性设置分隔符的对齐方式，可选值为 left*、center、right。

<template>
    <nue-div vertical>
        <nue-button>按钮</nue-button>
        <nue-divider text="文字" align="center" />
        <nue-button>按钮</nue-button>
    </nue-div>
</template>

设置分割线样式

通过 border-color 属性设置分割线的颜色。

通过 border-width 属性设置分割线的高度，接收 string 类型的 CSS 长度值，默认 1px。

通过 border-type 属性设置分割线的类型，可选值为 solid*、dashed 以及 dotted。

<template>
    <nue-div vertical>
        <nue-button>按钮</nue-button>
        <nue-divider border-color="#696969" />
        <nue-button>按钮</nue-button>
        <nue-divider border-color="#696969" border-width="3px" />
        <nue-button>按钮</nue-button>
        <nue-divider
            border-color="#696969"
            border-width="3px"
            border-type="dashed"
        />
        <nue-button>按钮</nue-button>
    </nue-div>
</template>