import { Meta, Story, Canvas } from '@storybook/addon-docs';
import NewLayout from '.';
import { Card } from '../card';
import PageActions from '../page-actions';
import Space from '../space';
import Page from '../page';

<Meta title="布局/页面布局 NewLayout" component={NewLayout} />

# 页面布局 NewLayout

## 导入

```typescript
import { NewLayout } from '@ahri-ui/core';
```

## 基本使用

<Canvas>
  <Story name="基本使用">
    <Page title="标题">
      <NewLayout>
        <NewLayout.Section>
          <Card sectioned>内容</Card>
        </NewLayout.Section>
        <NewLayout.Section>
          <Card sectioned>内容</Card>
        </NewLayout.Section>
        <NewLayout.Section>
          <PageActions
            primaryAction={{ content: '保存' }}
            secondaryActions={[{ content: '删除' }]}
          />
        </NewLayout.Section>
      </NewLayout>
    </Page>
  </Story>
</Canvas>

## 两列主次布局

<Canvas>
  <Story name="两列主次布局">
    <Page title="标题">
      <NewLayout>
        <NewLayout.Section>
          <Card sectioned>内容</Card>
          <Card sectioned>内容</Card>
        </NewLayout.Section>
        <NewLayout.Section secondary>
          <Card sectioned>内容</Card>
          <Card sectioned>内容</Card>
        </NewLayout.Section>
        <NewLayout.Section>
          <PageActions
            primaryAction={{ content: '保存' }}
            secondaryActions={[{ content: '删除' }]}
          />
        </NewLayout.Section>
      </NewLayout>
    </Page>
  </Story>
</Canvas>

## 带描述的布局

<Canvas>
  <Story name="带描述的布局">
    <Page title="标题">
      <NewLayout>
        <NewLayout.AnnotatedSection title="title" description="description">
          <Card sectioned>内容</Card>
        </NewLayout.AnnotatedSection>
        <NewLayout.AnnotatedSection title="title" description="description">
          <Card sectioned>内容</Card>
        </NewLayout.AnnotatedSection>
        <NewLayout.Section>
          <PageActions
            primaryAction={{ content: '保存' }}
            secondaryActions={[{ content: '删除' }]}
          />
        </NewLayout.Section>
      </NewLayout>
    </Page>
  </Story>
</Canvas>

## 两列平分布局

<Canvas>
  <Story name="两列平分布局">
    <Page title="标题">
      <NewLayout>
        <NewLayout.Section oneHalf>
          <Card sectioned>内容</Card>
        </NewLayout.Section>
        <NewLayout.Section oneHalf>
          <Card sectioned>内容</Card>
        </NewLayout.Section>
        <NewLayout.Section>
          <PageActions
            primaryAction={{ content: '保存' }}
            secondaryActions={[{ content: '删除' }]}
          />
        </NewLayout.Section>
      </NewLayout>
    </Page>
  </Story>
</Canvas>

## 三列平分布局 (屏幕缩小时第三列独自占一行)

<Canvas>
  <Story name="三列平分布局">
    <Page title="标题">
      <NewLayout>
        <NewLayout.Section oneThird>
          <Card sectioned>内容</Card>
        </NewLayout.Section>
        <NewLayout.Section oneThird>
          <Card sectioned>内容</Card>
        </NewLayout.Section>
        <NewLayout.Section oneThird>
          <Card sectioned>内容</Card>
        </NewLayout.Section>
        <NewLayout.Section>
          <PageActions
            primaryAction={{ content: '保存' }}
            secondaryActions={[{ content: '删除' }]}
          />
        </NewLayout.Section>
      </NewLayout>
    </Page>
  </Story>
</Canvas>

## API

### NewLayout

| 参数      | 说明           | 类型    | 默认值 |
| --------- | -------------- | ------- | ------ |
| sectioned | 是否有 padding | boolean | false  |

### NewLayout.Section

| 参数      | 说明         | 类型    | 默认值 |
| --------- | ------------ | ------- | ------ |
| secondary | 次级         | boolean | false  |
| fullWidth | 宽度充满父级 | boolean | false  |
| oneHalf   | 宽度一半     | boolean | false  |
| oneThird  | 宽度三分之一 | boolean | false  |

### NewLayout.AnnotatedSection

| 参数        | 说明 | 类型      | 默认值 |
| ----------- | ---- | --------- | ------ |
| title       | 标题 | ReactNode | -      |
| description | 描述 | boolean   | -      |