介绍

本文档主要用于描述 ShadcnDivider 组件的一些特性和用法。

用法

查看代码

<template>
    <div>Hello, View Shadcn UI, Divider</div>
    <ShadcnDivider />
</template>

<script setup lang="ts">
</script>

类型 (type)

查看代码

<template>
    <div>Horizontal</div>
    <ShadcnDivider type="horizontal" />
    <div class="flex space-x-2">
        <div>Vertical</div>
        <ShadcnDivider type="vertical" />
        <a href="#">Link</a>
        <ShadcnDivider type="vertical" />
        <div>Vertical</div>
    </div>
</template>

<script setup lang="ts">
</script>

位置 (position)

查看代码

<template>
    <ShadcnDivider orientation="left">Left</ShadcnDivider>
    <ShadcnDivider orientation="center">Center</ShadcnDivider>
    <ShadcnDivider orientation="right">Right</ShadcnDivider>
</template>

<script setup lang="ts">
</script>

虚线 (dashed)

查看代码

<template>
    <ShadcnDivider dashed />
</template>

<script setup lang="ts">
</script>

分隔线 (Divider) 属性

分隔线 (Divider) 插槽