View Shadcn UI

Appearance

介绍 ​


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

Layout 组件提供了经典的页面布局，包含 Header、Content、Footer 和 Sider 组件，支持自动识别侧边栏并调整布局方向。

基础用法 ​

查看代码
vue
<template>
<ShadcnLayout>
    <ShadcnLayoutHeader class="bg-sky-300 text-white h-12 flex items-center px-4">Header</ShadcnLayoutHeader>
    <ShadcnLayoutContent class="bg-sky-600 text-white h-32 flex items-center px-4">Content</ShadcnLayoutContent>
    <ShadcnLayoutFooter class="bg-sky-300 text-white h-16 flex items-center px-4">Footer</ShadcnLayoutFooter>
</ShadcnLayout>
</template>

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

带侧边栏的布局 ​

Layout 会自动检测子组件中是否包含 Sider，如果包含则使用横向布局，否则使用纵向布局。

查看代码
vue
<template>
<ShadcnLayout>
    <ShadcnLayoutSider :collapsible="false">Sider</ShadcnLayoutSider>
    <ShadcnLayout>
        <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
        <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
    </ShadcnLayout>
</ShadcnLayout>
</template>

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

多种布局组合 ​

通过嵌套 Layout 组件，可以实现各种复杂的布局结构。

查看代码
vue
<template>
<!-- Header + (Sider + Content) + Footer -->
<ShadcnLayout>
    <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
    <ShadcnLayout>
        <ShadcnLayoutSider :collapsible="false">Sider</ShadcnLayoutSider>
        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
    </ShadcnLayout>
    <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
</ShadcnLayout>

<!-- Header + (Content + Sider) + Footer -->
<ShadcnLayout>
    <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
    <ShadcnLayout>
        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
        <ShadcnLayoutSider :collapsible="false">Sider</ShadcnLayoutSider>
    </ShadcnLayout>
    <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
</ShadcnLayout>
</template>

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

可折叠侧边栏 ​

Sider 支持折叠功能，可以通过内置触发器或自定义触发器来控制折叠状态。

查看代码
vue
<template>
<ShadcnLayout>
    <ShadcnLayoutSider
        :collapsible="true"
        :trigger="true"
        @on-collapse="handleCollapse">
        <div>Sider Content</div>
    </ShadcnLayoutSider>
    <ShadcnLayout>
        <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
        <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
    </ShadcnLayout>
</ShadcnLayout>
</template>

<script setup lang="ts">
const handleCollapse = (collapsed: boolean) => {
    console.log('collapsed:', collapsed);
};
</script>

自定义折叠内容 ​

通过插槽可以自定义折叠状态下的内容。

查看代码
vue
<template>
<ShadcnLayout>
    <ShadcnLayoutSider :collapsible="true" :trigger="true">
        <template #default>
            <div>完整内容</div>
        </template>
        <template #collapsed>
            <div>折</div>
        </template>
    </ShadcnLayoutSider>
    <ShadcnLayout>
        <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
        <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
    </ShadcnLayout>
</ShadcnLayout>
</template>

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

Sider Props ​

Sider Events ​

Sider Slots ​

Sider Methods ​