View Shadcn UI

Appearance

介绍 ​


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

用法 ​

查看代码
vue
<template>
    <ShadcnRow>
        <ShadcnCol class="bg-blue-200 h-12"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-12"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-12"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-12"></ShadcnCol>
    </ShadcnRow>
</template>

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

间隔 (gutter) ​

查看代码
vue
<template>
    <ShadcnRow :gutter="30">
        <ShadcnCol class="bg-blue-200 h-12"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-12"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-12"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-12"></ShadcnCol>
    </ShadcnRow>
</template>

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

垂直对齐 (align) ​

查看代码
vue
<template>
    <ShadcnRow align="top">
        <ShadcnCol class="bg-blue-200 h-16"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-14"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-10"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-14"></ShadcnCol>
    </ShadcnRow>
    <ShadcnRow align="middle">
        <ShadcnCol class="bg-blue-200 h-16"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-14"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-10"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-14"></ShadcnCol>
    </ShadcnRow>
    <ShadcnRow align="bottom">
        <ShadcnCol class="bg-blue-200 h-16"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-14"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-10"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-14"></ShadcnCol>
    </ShadcnRow>
</template>

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

水平对齐 (justify) ​

查看代码
vue
<template>
    <ShadcnRow justify="start">
        <ShadcnCol class="bg-blue-200 h-16"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-14"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-10"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-14"></ShadcnCol>
    </ShadcnRow>
    <ShadcnRow justify="center">
        <ShadcnCol class="bg-blue-200 h-16"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-14"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-10"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-14"></ShadcnCol>
    </ShadcnRow>
    <ShadcnRow justify="end">
        <ShadcnCol class="bg-blue-200 h-16"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-14"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-10"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-14"></ShadcnCol>
    </ShadcnRow>
    <ShadcnRow justify="between">
        <ShadcnCol class="bg-blue-200 h-16"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-14"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-10"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-14"></ShadcnCol>
    </ShadcnRow>
</template>

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

自动换行 (wrap) ​

查看代码
vue
<template>
    <ShadcnRow wrap :gutter="2">
        <ShadcnCol v-for="i in 40" class="bg-blue-200"/>
    </ShadcnRow>
</template>

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

列数 (span) ​

查看代码
vue
<template>
    <ShadcnRow>
        <ShadcnCol class="bg-blue-200 h-12" span="2"></ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-12" span="1"></ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-12" span="3"></ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-12" span="1"></ShadcnCol>
    </ShadcnRow>
</template>

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

列顺序 (order) ​

查看代码
vue
<template>
    <ShadcnRow>
        <ShadcnCol class="bg-blue-200 h-12" order="2" span="3">1 | order 2</ShadcnCol>
        <ShadcnCol class="bg-blue-300 h-12" order="1" span="3">2 | order 1</ShadcnCol>
        <ShadcnCol class="bg-blue-400 h-12" order="3" span="3">3 | order 3</ShadcnCol>
        <ShadcnCol class="bg-blue-500 h-12" order="4" span="3">4 | order 4</ShadcnCol>
    </ShadcnRow>
</template>

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

行 (Row) 属性 ​

列 (Col) 属性 ​