> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/layout.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt.

# Layout 布局

组织页面的头部、侧栏、内容与底部。

## 基本用法

用 Header、Sider、Content 和 Footer 组合页面，横向嵌套区域负责排列侧栏与内容。


顶部导航

侧栏

正文内容

底部信息

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/layout/basic.tsx"
import { Layout, Text } from '@ifhover/leaf-ui';

export function LayoutBasic() {
  return (
    <Layout>
      <Layout.Header>
        <Text>顶部导航</Text>
      </Layout.Header>
      <Layout direction="horizontal">
        <Layout.Sider width={140}>侧栏</Layout.Sider>
        <Layout.Content>正文内容</Layout.Content>
      </Layout>
      <Layout.Footer>底部信息</Layout.Footer>
    </Layout>
  );
}
```

展开代码

## 响应式侧栏

侧栏支持手动折叠，在窄屏上自动收起；菜单同步切换为图标导航。


概览

项目

收起侧栏

### 概览

选择导航项查看内容。

advanced.tsx

复制代码

```tsx lineNumbers file="../../src/examples/layout/advanced.tsx"
import { Card, Layout, Menu, useBreakpoint } from '@ifhover/leaf-ui';

import { Folder, LayoutDashboard } from 'lucide-react';

import { useState } from 'react';

export function LayoutResponsive() {
  const [collapsed, setCollapsed] = useState(false);
  const { sm } = useBreakpoint();
  const compact = collapsed || !sm;
  const [selected, setSelected] = useState('overview');
  const items = [
    { key: 'overview', label: '概览', icon: <LayoutDashboard /> },
    { key: 'projects', label: '项目', icon: <Folder /> },
  ];
  return (
    <Layout direction="horizontal">
      <Layout.Sider
        width={180}
        collapsedWidth={64}
        collapsed={collapsed}
        onCollapse={setCollapsed}
        collapsible
        breakpoint={575}
      >
        <Menu
          mode="inline"
          collapsed={compact}
          selectedKey={selected}
          onSelect={setSelected}
          items={items}
        />
      </Layout.Sider>
      <Layout.Content>
        <Card title={items.find((item) => item.key === selected)?.label}>选择导航项查看内容。</Card>
      </Layout.Content>
    </Layout>
  );
}
```

展开代码

## 使用说明

用 Layout.Header、Layout.Sider、Layout.Content、Layout.Footer 组合页面；横向区域使用 direction="horizontal"。侧栏可受控折叠，也可通过 breakpoint 自动收起。

## 类型

组装数据、定义回调和使用 ref 时，可以导入这些类型。

```ts
import type { LayoutProps, LayoutSiderProps } from '@ifhover/leaf-ui';
```

## LayoutProps API

| 属性          | 类型                           | 默认值          | 说明        |
| ----------- | ---------------------------- | ------------ | --------- |
| `direction` | `'horizontal' \| 'vertical'` | `'vertical'` | 排列方向或移动方向 |

## LayoutSiderProps API

| 属性                 | 类型                             | 默认值     | 说明          |
| ------------------ | ------------------------------ | ------- | ----------- |
| `width`            | `number \| string`             | `220`   | 宽度，数字按像素计算  |
| `collapsedWidth`   | `number \| string`             | `64`    | 收起后的宽度      |
| `collapsed`        | `boolean`                      | —       | 受控收起状态      |
| `defaultCollapsed` | `boolean`                      | `false` | 初始收起状态      |
| `collapsible`      | `boolean`                      | `false` | 显示收起操作      |
| `breakpoint`       | `number`                       | —       | 自动收起的屏幕宽度阈值 |
| `onCollapse`       | `(collapsed: boolean) => void` | —       | 收起状态变化      |
| `trigger`          | `ReactNode`                    | —       | 自定义触发内容     |