Divider 分隔符

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

基础用法

使用标签 <NueDivider> 声明一个分隔符组件。

<template>
    <nue-div gap=".5rem" vertical>
        <nue-text color="gray" size=".875rem">这是一段文字</nue-text>
        <nue-divider />
        <nue-text color="gray" size=".875rem">这是一段文字</nue-text>
    </nue-div>
</template>

垂直方向

通过属性 vertical 设置分隔符组件的方向为垂直。

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

定义线条颜色、类型以及粗细

通过属性 line-color 定义分隔符组件线的颜色；属性 line-style 定义线条类型；属性 line-width 定义线条粗细。

<template>
    <nue-div gap=".5rem" vertical>
        <nue-text color="gray" size=".875rem">颜色</nue-text>
        <nue-divider line-color="red" />
        <nue-text color="gray" size=".875rem">类型</nue-text>
        <nue-divider line-color="red" line-style="dashed" />
        <nue-text color="gray" size=".875rem">粗细</nue-text>
        <nue-divider line-color="red" line-style="dashed" line-width="3px" />
    </nue-div>
</template>

定义文本或其他内容

通过属性 text 设置分隔符组件内部文字（显示在分割线上）；通过默认插槽 #default 自定义内部内容。

<template>
    <nue-div vertical>
        <nue-divider line-width="2px" text="这是一条 2px 的分界线" />
        <nue-divider line-width="2px" alignment="center">
            <nue-avatar size="3rem" theme="round" src="https://picsum.photos/200/300" />
        </nue-divider>
    </nue-div>
</template>