---
nav:
  title: 组件
  path: /components
---

## Layout

Demo:

```tsx
/**
 * transform: true
 */
import React from 'react';
import { Layout, Menu, Iconfont } from '@pingfe/brick';

export default (props: any) => (
  <Layout
    style={{
      minHeight: '100vh',
    }}
  >
    <Layout.Header />
    <Layout.Sider
      style={{
        position: 'fixed',
        top: 64,
        left: 0,
        bottom: 0,
        zIndex: 99,
        height: 'auto',
      }}
    >
      <Menu>
        <Menu.Item icon={<Iconfont icon="subscribe" />} type="link" link="/">
          我的订阅
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item icon={<Iconfont icon="wire" />} type="link" link="/">
          实时要闻
        </Menu.Item>
        <Menu.Item icon={<Iconfont icon="pinGraphic" />} type="link" link="/">
          PinGraphic
        </Menu.Item>
        <Menu.Item icon={<Iconfont icon="guixingren" />} type="link" link="/">
          硅星人
        </Menu.Item>
        <Menu.Item icon={<Iconfont icon="bukeguanshiyanshi" />} type="link" link="/">
          不客观实验室
        </Menu.Item>
        <Menu.Item icon={<Iconfont icon="wire" />} type="link" link="/">
          品驾
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item icon={<Iconfont icon="event" />} type="link" link="/">
          线下活动
        </Menu.Item>
        <Menu.Item icon={<Iconfont icon="topic" />} type="link" link="/">
          专题
        </Menu.Item>
        <Menu.Item icon={<Iconfont icon="channel" />} type="link" link="/">
          频道
        </Menu.Item>
        <Menu.Item icon={<Iconfont icon="tag" />} type="link" link="/">
          标签
        </Menu.Item>
        <Menu.Divider />
        <Menu.SubMenu title="好的" icon={<Iconfont icon="subscribe" />}>
          <Menu.Item>3333</Menu.Item>
        </Menu.SubMenu>
        <Menu.Divider />
      </Menu>
    </Layout.Sider>
    <Layout.Content
      style={{
        margin: '64px 0 0 280px',
      }}
    >
      <div>Layout</div>
    </Layout.Content>
  </Layout>
);
```
