import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, ButtonGroup } from 'components'

export const meta = {
  title: '按钮组 Button Group',
  group: '数据录入',
}

## Button Group / 按钮组

展示一组具备相关性的按钮。

<Playground
  scope={{ Button, ButtonGroup }}
  code={`
<ButtonGroup>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
`}
/>

<Playground
  title="变体"
  desc="设置组内所有按钮的类型或样式。"
  scope={{ Button, ButtonGroup }}
  code={`
<>
  <ButtonGroup type="success" scale={0.5}>
    <Button scale={0.5}>One</Button>
    <Button scale={0.5}>Two</Button>
    <Button scale={0.5}>Three</Button>
  </ButtonGroup>
  <ButtonGroup type="abort" scale={0.5}>
    <Button scale={0.5}>Action1</Button>
    <Button scale={0.5}>Action2</Button>
  </ButtonGroup>
  <ButtonGroup type="warning" ghost scale={0.5}>
    <Button scale={0.5}>Action1</Button>
    <Button scale={0.5}>Action2</Button>
  </ButtonGroup>
  <ButtonGroup type="success-light" scale={0.5}>
    <Button scale={0.5}>One</Button>
    <Button scale={0.5}>Two</Button>
    <Button scale={0.5}>Three</Button>
  </ButtonGroup>
</>
`}
/>

<Playground
  title="大小"
  scope={{ Button, ButtonGroup }}
  code={`
<>
  <ButtonGroup scale={2/3}>
    <Button scale={2/3}>One</Button>
    <Button scale={2/3}>Two</Button>
    <Button scale={2/3}>Three</Button>
  </ButtonGroup>
  <ButtonGroup scale={1/3}>
    <Button scale={1/3}>Action1</Button>
    <Button scale={1/3}>Action2</Button>
  </ButtonGroup>
</>
`}
/>

<Playground
  title="垂直的"
  scope={{ Button, ButtonGroup }}
  code={`
<>
  <ButtonGroup vertical>
    <Button>One</Button>
    <Button>Two</Button>
    <Button>Three</Button>
    <Button>Four</Button>
  </ButtonGroup>
</>
`}
/>

<Playground
  title="禁用"
  desc="禁用组内所有的按钮。"
  scope={{ Button, ButtonGroup }}
  code={`
<>
  <ButtonGroup scale={2/3} disabled>
    <Button scale={2/3}>One</Button>
    <Button scale={2/3}>Two</Button>
    <Button scale={2/3}>Three</Button>
  </ButtonGroup>
</>
`} />
<Attributes edit="/pages/zh-cn/components/button-group.mdx">
<Attributes.Title>ButtonGroup.Props</Attributes.Title>

| 属性         | 描述                   | 类型                   | 推荐值                      | 默认      |
| ------------ | ---------------------- | ---------------------- | --------------------------- | --------- |
| **type**     | 按钮类型               | `ButtonTypes`          | [ButtonTypes](#buttontypes) | `default` |
| **ghost**    | 相反色彩模式的按钮     | `boolean`              | -                           | `false`   |
| **vertical** | 以垂直方式显示所有按钮 | `boolean`              | -                           | `false`   |
| **disabled** | 是否禁用所有按钮       | `boolean`              | -                           | `false`   |
| ...          | 原生属性               | `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>
