Layout 布局

页面级骨架：顶栏、侧栏、主区、底栏。常见后台为「外层横向（Aside + 内容）+ 内层纵向（Header / Main / Footer）」。

经典侧栏

侧栏导航

dan-ui Admin

主内容区。Aside 支持 `v-model:collapsed`。

© dan-ui

<script setup lang="ts">
import { ref } from 'vue'
import {
  DanAside,
  DanButton,
  DanFooter,
  DanHeader,
  DanLayout,
  DanMain,
} from '@dandan-ui/ui'

const collapsed = ref(false)
</script>

<template>
  <div style="height: 320px; border: 1px solid var(--dan-color-border)">
    <DanLayout style="height: 100%">
      <DanAside
        v-model:collapsed="collapsed"
        width="200px"
        collapsed-width="64px"
      >
        <div style="padding: 16px">
          {{ collapsed ? '导航' : '侧栏导航' }}
        </div>
      </DanAside>
      <DanLayout>
        <DanHeader>
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
            "
          >
            <strong>dan-ui Admin</strong>
            <DanButton size="small" @click="collapsed = !collapsed">
              {{ collapsed ? '展开侧栏' : '收起侧栏' }}
            </DanButton>
          </div>
        </DanHeader>
        <DanMain> 主内容区。Aside 支持 `v-model:collapsed`。 </DanMain>
        <DanFooter>© dan-ui</DanFooter>
      </DanLayout>
    </DanLayout>
  </div>
</template>

Layout Props

属性	说明	类型	默认值
direction	强制方向；不传则按是否含 Aside 自动判断	'horizontal' | 'vertical'	—

Aside Props

属性	说明	类型	默认值
width	展开宽度	string	'220px'
collapsed	是否折叠（支持 v-model:collapsed）	boolean	false
collapsedWidth	折叠宽度	string	'64px'

Header / Footer Props

属性	说明	类型	默认值
height	高度	string	Header 56px / Footer 48px