@cainiaofe/cn-ui-layout/stories/cn-layout-page/demo.stories.mdx

- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`

import { Meta, Story, Canvas, ArgsTable, Source } from '@storybook/addon-docs';
import {
  CnLayoutPage,
  CnLayoutContent,
  CnLayoutHeader,
  CnLayoutSection,
  CnLayoutCol,
  CnLayoutRow,
  CnLayoutCell,
} from './doc-components';

<Meta
  title="自然布局 CnLayoutPage"
  component={CnLayoutPage}
  subcomponents={{
    CnLayoutContent,
    CnLayoutHeader,
    CnLayoutSection,
    CnLayoutCol,
    CnLayoutRow,
    CnLayoutCell,
  }}
/>

## 引入组件

```typescript
import { CnLayoutPage } from '@cainiaofe/cn-ui-layout';
```

## 示例

<Story id="cnlayoutpage--基础使用" />

<Story id="cnlayoutpage--响应式自动布局" />

## API

<ArgsTable of={CnLayoutPage} />