import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, Grid, Code } from 'components'
import Settings from '@geist-ui/icons/settings'
import UserX from '@geist-ui/icons/userX'
import Power from '@geist-ui/icons/power'

export const meta = {
  title: '按钮 Button',
  group: '通用',
}

## Button / 按钮

用于触发一个操作。

<Playground
  desc="基础的 `Button` 包含一个动画效果。"
  scope={{ Button }}
  code={`
<Button>动作</Button>
`}
/>

<Playground
  title="加载中"
  desc="表示正在运行或加载中的状态。"
  scope={{ Button, Spacer }}
  code={`
<>
  <Button loading>Action</Button>
  <Spacer h={.5} />
  <Button loading scale={0.75}>Action</Button>
  <Spacer h={.5} />
  <Button loading auto type="success" scale={2/3}>Action</Button>
</>
`}
/>

<Playground
  title="禁用的"
  desc="不对任何操作进行响应。"
  scope={{ Button }}
  code={`
<Button disabled>点击</Button>
`}
/>

<Playground
  title="阴影"
  desc="使用阴影突出显示更高层级的按钮。"
  scope={{ Button }}
  code={`
<Button shadow type="secondary">阴影</Button>
`}
/>

<Playground
  title="类型"
  desc="不同状态下的按钮。"
  scope={{ Button, Grid }}
  code={`
<Grid.Container gap={2}>
  <Grid><Button auto type="secondary">次要的</Button></Grid>
  <Grid><Button auto type="success">成功</Button></Grid>
  <Grid><Button auto type="warning">警告</Button></Grid>
  <Grid><Button auto type="error">错误</Button></Grid>
  <Grid><Button auto type="abort">中止</Button></Grid>
  <Grid><Button auto type="secondary-light">次要的 浅色</Button></Grid>
  <Grid><Button auto type="success-light">成功 浅色</Button></Grid>
  <Grid><Button auto type="warning-light">警告 浅色</Button></Grid>
  <Grid><Button auto type="error-light">错误 浅色</Button></Grid>
</Grid.Container>
`}
/>

<Playground
  title="反色"
  desc="底色与主色相反的透明按钮。"
  scope={{ Button, Grid }}
  code={`
<Grid.Container gap={1.5}>
  <Grid><Button type="secondary" ghost auto scale={0.7}>Secondary</Button></Grid>
  <Grid><Button type="success" ghost auto scale={0.7}>Success</Button></Grid>
  <Grid><Button type="warning" ghost auto scale={0.7}>Warning</Button></Grid>
  <Grid><Button type="error" ghost auto scale={0.7}>Error</Button></Grid>
</Grid.Container>
`}
/>

<Playground
  title="伸缩性"
  desc="不同大小的按钮组件。"
  scope={{ Button, Grid }}
  code={`
<Grid.Container gap={1.5}>
  <Grid><Button auto scale={0.25}>0.25</Button></Grid>
  <Grid><Button auto scale={0.35}>0.35</Button></Grid>
  <Grid><Button auto scale={1/2}>1 / 2</Button></Grid>
  <Grid><Button auto scale={0.75}>0.75</Button></Grid>
  <Grid><Button auto padding={0}>NoPadding</Button></Grid>
  <Grid><Button auto font={0.25}>Small Font</Button></Grid>
  <Grid><Button auto pl={0} ml="25px">Offset</Button></Grid>
  <Grid xs={12}><Button width="100%">Full Width</Button></Grid>
  <Grid xs={12}>
    <Button auto width="30%" mx="5px">proportion</Button>
    <Button auto width="30%" mx="5px">proportion</Button>
    <Button auto width="30%" mx="5px">proportion</Button>
  </Grid>
</Grid.Container>
`}
/>

<Playground
  title="图标"
  desc="按钮内的图标色彩和大小将会被自动设置。"
  scope={{ Button, Spacer, Settings, UserX, Power }}
  code={`
<>
  <Button iconRight={<Power />} auto scale={2/3} />
  <Spacer w={.5} inline />
  <Button iconRight={<Power />} auto scale={2/3} px={0.6} />
  <Spacer h={.5} />
  <Button icon={<Settings />} auto>Action</Button>
  <Spacer h={.5} />
  <Button icon={<Settings />} type="success" scale={0.85}>Success</Button>
  <Spacer h={.5} />
  <Button icon={<Settings />} type="secondary">Success</Button>
  <Spacer h={.5} />
  <Button icon={<UserX />} type="error" ghost>Remove User</Button>
  <Spacer h={.5} />
  <Button icon={<UserX />} disabled>Remove User</Button>
</>
`}
/>

<Attributes edit="/pages/zh-cn/components/button.mdx">
<Attributes.Title>Button.Props</Attributes.Title>

| 属性          | 描述                   | 类型                                            | 推荐值                      | 默认      |
| ------------- | ---------------------- | ----------------------------------------------- | --------------------------- | --------- |
| **type**      | 按钮的类型             | `ButtonTypes`                                   | [ButtonTypes](#buttontypes) | `default` |
| **ghost**     | 是否为反色按钮         | `boolean`                                       | -                           | `false`   |
| **loading**   | 是否显示加载中的指示器 | `boolean`                                       | -                           | `false`   |
| **shadow**    | 是否显示阴影           | `boolean`                                       | -                           | `false`   |
| **auto**      | 自动缩放宽度           | `boolean`                                       | -                           | `false`   |
| **effect**    | 是否显示动画效果       | `boolean`                                       | -                           | `true`    |
| **disabled**  | 是否禁用按钮           | `boolean`                                       | -                           | `false`   |
| **onClick**   | 点击事件               | `MouseEventHandler`                             | -                           | -         |
| **icon**      | 在按钮内显示图标       | `ReactNode`                                     | -                           | -         |
| **iconRight** | 在按钮右侧显示图标     | `ReactNode`                                     | -                           | -         |
| **htmlType**  | 按钮的原生类型属性     | `ButtonHTMLAttributes.type`                     | -                           | `button`  |
| **ref**       | Ref 转发               | <Code>Ref<HTMLButtonElement &#124; null></Code> | -                           | -         |
| ...           | 原生属性               | `ButtonHTMLAttributes`                          | `'id', 'className', ...`    | -         |

<Attributes.Title>ButtonTypes</Attributes.Title>

```ts
type ButtonTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'abort'
  | 'secondary-light'
  | 'success-light'
  | 'warning-light'
  | 'error-light'
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
