布局 Layout

Layout 协助进行页面级整体布局。它提供了 Header、Sider、Content、Footer 四个子区域，并通过 Sider 提供可折叠、响应式断点、自定义触发器等能力。

基本用法

通过 Layout、Header、Content、Footer、Sider 的嵌套组合，可以搭建出最常见的几种页面骨架。

顶部布局

当不需要侧边栏时，仅使用 Header、Content、Footer 即可组成上下结构的布局。

侧边布局

Sider 默认跟随 ConfigProvider 的 themeMode（未设置时为浅色），设置 theme="dark" 可显式切换为深色。设置 collapsible 后会在底部渲染折叠触发器，点击即可在展开与折叠宽度之间切换。内容区默认使用组件库 Scrollbar 滚动，如需原生滚动可设置 :scrollbar="false"。

将 Menu 放入 Sider 中时，菜单会自动跟随 Sider 的折叠状态：展开时显示图标与文字，折叠时仅显示图标，并在悬浮时以 Tooltip 展示对应文字。

自定义触发器

设置 hide-trigger 可隐藏内置触发器，再通过受控的 collapsed 配合外部按钮自行控制折叠状态。

响应式布局

Sider 可设置 breakpoint 响应式断点，当屏幕宽度命中断点时会自动折叠；配合 collapsed-width="0" 可在折叠时完全收起，并出现一个零宽触发器用于再次展开。

临时（悬浮）菜单

设置 temporary 后，Sider 内容会渲染到 Drawer 中作为悬浮抽屉，由 collapsed 控制开合（collapsed=true 关闭，false 展开）。此时 Sider 本身退化为一个汉堡触发器宿主，点击即可打开抽屉。可通过 drawer-props 透传 placement、mask-closable、esc-to-close 等 Drawer 配置（visible/width 等与 Sider 语义冲突的字段已由 Sider 接管，不可透传）。

窄轨（Rail）

设置 rail 后，Sider 常驻为窄轨宽度（默认 72px），仅展示图标、节省横向空间，且与 collapsed 折叠相互独立。配合 expand-on-hover 可在鼠标悬停时临时展开到完整 width：展开内容以覆盖（overlay）方式浮在内容上方，主体内容不会移动；移出后自动收回。rail 仅受控切换（通过 update:rail 事件感知悬停展开/收回），内置触发器仍只负责 collapsed，二者互不影响。

固定布局

配合 CSS position: sticky / fixed 可以让 Header 或 Sider 固定在视口内，常用于长页面滚动场景。

API

`<layout>` Props

参数名	描述	类型	默认值	版本
has-sider	是否包含 Sider，设为布尔值时会覆盖自动检测	`boolean`	`false`

`<layout>` Slots

插槽名	描述	参数
default	布局内容，通常嵌套 `Header`、`Sider`、`Content`、`Footer`	-

`<layout-sider>` Props

参数名	描述	类型	默认值
collapsible	是否可折叠	`boolean`	`false`
collapsed	当前折叠状态（受控）	`boolean`	`-`
default-collapsed	默认折叠状态（非受控）	`boolean`	`false`
reverse-arrow	折叠时是否反转箭头方向，用于右侧 Sider	`boolean`	`false`
zero-width-trigger-style	`collapsed-width` 为 0 时零宽触发器的自定义样式	`CSSProperties`	`-`
hide-trigger	是否隐藏内置折叠触发器，配合受控的 `collapsed` 自行控制折叠	`boolean`	`false`
width	展开时的宽度	`number \| string`	`200`
collapsed-width	折叠时的宽度	`number \| string`	`48`
breakpoint	响应式断点，命中时自动折叠	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl'`	`-`
theme	主题颜色，未设置时跟随 ConfigProvider 的 themeMode	`'light' \| 'dark'`	`-`
scrollbar	滚动配置，默认使用组件库 `Scrollbar`；设为 `false` 使用原生 `overflow:auto`，传对象可配置 `Scrollbar`	`boolean \| ScrollbarProps`	`-`
temporary	临时模式：使用 `Drawer` 渲染悬浮菜单，由 `collapsed` 控制开合（`collapsed=true` 关闭，`false` 展开）	`boolean`	`false`
rail	窄轨模式：`Sider` 常驻为窄轨宽度（仅展示图标），与 `collapsed` 折叠相互独立	`boolean`	`false`
rail-width	窄轨宽度，仅 `rail=true` 时生效	`number \| string`	`72`
expand-on-hover	窄轨模式下悬停 `Sider` 时临时展开到 `width`（覆盖在内容上方，不推动内容），移出后收回。仅 `rail=true` 时生效	`boolean`	`false`
drawer-props	`temporary` 模式下透传给 `Drawer` 的配置（仅 `temporary=true` 时生效）。已排除 `visible`/`defaultVisible`/`width`/`footer` 等与 `Sider` 语义冲突的字段	`SiderTemporaryDrawerProps`	`-`

`<layout-sider>` Events

事件名	描述	参数
collapse	折叠状态变化时触发	collapsed: `boolean` type: `'clickTrigger' \| 'responsive'`
breakpoint	响应式断点命中状态变化时触发	broken: `boolean`
update:rail	窄轨悬停展开/收回时触发（`false` 展开，`true` 收回）。仅 `rail` + `expand-on-hover` 时触发	rail: `boolean`

`<layout-sider>` Slots

插槽名	描述	参数
default	Sider 内容	-
trigger	自定义折叠触发器内容，未传时展示默认箭头图标	-

`<layout-header>` / `<layout-footer>` / `<layout-content>`

这三个子组件仅作为语义化容器，没有专属属性，支持透传原生 HTML 属性与样式。

Header 渲染为 <header> 元素
Footer 渲染为 <footer> 元素
Content 渲染为 <main> 元素