Skip to content

介绍


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

用法

查看代码
vue
<template>
    <ShadcnSpace>
        <ShadcnButton>Button 1</ShadcnButton>
        <ShadcnButton>Button 2</ShadcnButton>
        <ShadcnButton>Button 3</ShadcnButton>
    </ShadcnSpace>
</template>

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

尺寸 (size)

查看代码
vue
<template>
    <ShadcnSpace size="large">
        <ShadcnButton>Button 1</ShadcnButton>
        <ShadcnButton>Button 2</ShadcnButton>
    </ShadcnSpace>
</template>

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

自动换行 (wrap)

查看代码
vue
<template>
    <ShadcnSpace wrap>
        <ShadcnButton v-for="i in 20" type="primary">Wrap {{ i }}</ShadcnButton>
    </ShadcnSpace>
    <p>Array Size</p>
    <ShadcnSpace wrap :size="[40, 80]">
        <ShadcnButton v-for="i in 20">Wrap {{ i }}</ShadcnButton>
    </ShadcnSpace>
</template>

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

间距 (Space) 属性