# Layout

基于 flex 的页面布局容器组件，包含 Layout、Header、Content、Sidebar、Footer、Panel 六个子组件。

## 适用场景

- 页面整体布局（一栏居中、一栏固宽）
- 带侧边栏的后台管理页面（两栏、三栏、四栏）
- 编辑器类多栏布局

## 组件概述

- `Layout`：布局容器，其下可嵌套 Header、Sidebar、Content、Footer 或 Layout 本身
- `Header`：顶部布局，只能放在 Layout 中
- `Content`：内容部分，只能放在 Layout 中
- `Sidebar`：侧边栏，定宽 60px～400px，只能放在 Layout 中
- `Footer`：底部布局，只能放在 Layout 中
- `Panel`：内容块，用于 Content 内部区域划分

## Props

### Panel Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |

> Layout、Header、Content、Footer、Sidebar 无额外 props，仅作为语义化布局容器使用。

## 典型用法

### 一栏居中布局

> 最小断点 1080（内容区固定 1040），最大断点 1600（内容区固定 1360）

```tsx
import {Layout, Header, Content, Footer} from '@befe/brick'

<Layout>
    <Header>页头</Header>
    <Content>内容区</Content>
    <Footer>页脚</Footer>
</Layout>
```

### 一栏固宽布局

> 内容区宽度固定为 1040

```tsx
<Layout mode={'static'}>
    <Header>页头</Header>
    <Content>内容区</Content>
    <Footer>页脚</Footer>
</Layout>
```

### 两栏-上中下（带侧栏）

> 最小断点 1280，最大断点 1920

```tsx
import {Layout, Header, Content, Footer, Sidebar, Panel} from '@befe/brick'

<Layout>
    <Header>页头</Header>
    <Layout>
        <Sidebar>侧栏（定宽 60px～400px）</Sidebar>
        <Content>
            <Panel>内容块</Panel>
            <Panel>内容块</Panel>
        </Content>
    </Layout>
    <Footer>页脚</Footer>
</Layout>
```

### 两栏-左右（侧栏通栏）

> 侧栏通栏情况下无最大断点限制，需考虑超宽屏幕下内容区宽度

```tsx
<Layout>
    <Sidebar>侧栏</Sidebar>
    <Layout>
        <Header>页头</Header>
        <Content>内容区</Content>
        <Footer>页脚</Footer>
    </Layout>
</Layout>
```

### 三栏编辑器布局（侧栏左1右1）

```tsx
<Layout>
    <Header>页头</Header>
    <Layout>
        <Sidebar>工具栏</Sidebar>
        <Content>内容区</Content>
        <Sidebar>属性栏</Sidebar>
    </Layout>
    <Footer>页脚</Footer>
</Layout>
```

## 注意事项

- 采用 flex 布局实现，注意[浏览器兼容性](https://caniuse.com/#search=flex)
- 侧栏通栏布局（两栏左右）无最大断点，需评估超宽屏幕下内容区宽度是否可接受
- 组件不支持 `props.style`