import Layout from 'lib/components/layout'
import Attributes from 'lib/components/attributes'
import Playground from 'lib/components/playground'
import { ButtonDropdown, Spacer } from 'components'

export const meta = {
  title: '下拉按钮 Btn Dropdown',
  group: '导航',
  index: 105,
}

## Button Dropdown / 下拉按钮

显示相关的操作。

<Playground
  scope={{ ButtonDropdown }}
  code={`
<ButtonDropdown>
  <ButtonDropdown.Item main>默认按钮</ButtonDropdown.Item>
  <ButtonDropdown.Item>次要的按钮</ButtonDropdown.Item>
  <ButtonDropdown.Item>第三个按钮</ButtonDropdown.Item>
</ButtonDropdown>
`}
/>

<Playground
  title="禁用"
  desc="禁用所有的按钮。"
  scope={{ ButtonDropdown }}
  code={`
<ButtonDropdown disabled>
  <ButtonDropdown.Item main>默认动作</ButtonDropdown.Item>
  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>
  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>
</ButtonDropdown>
`}
/>

<Playground
  title="加载中"
  desc="显示一个友好的加载指示器。"
  scope={{ ButtonDropdown }}
  code={`
<ButtonDropdown loading>
  <ButtonDropdown.Item main>Default Action</ButtonDropdown.Item>
  <ButtonDropdown.Item>Secondary Action</ButtonDropdown.Item>
  <ButtonDropdown.Item>Tertiary Action</ButtonDropdown.Item>
</ButtonDropdown>
`}
/>

<Playground
  title="类型"
  scope={{ ButtonDropdown, Spacer }}
  code={`
<>
  <ButtonDropdown type="secondary">
    <ButtonDropdown.Item main>次要的</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown type="success">
    <ButtonDropdown.Item main>成功</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown type="warning">
    <ButtonDropdown.Item main>警告</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown type="error">
    <ButtonDropdown.Item main>错误</ButtonDropdown.Item>
  </ButtonDropdown>
</>
`}
/>

<Playground
  title="大小"
  desc="不同大小的组件。"
  scope={{ ButtonDropdown, Spacer }}
  code={`
<>
  <ButtonDropdown size="mini" auto>
    <ButtonDropdown.Item main>自动-小</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="small" auto>
      <ButtonDropdown.Item main>自动-较小</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="small" auto>
    <ButtonDropdown.Item main>自动-中等</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="mini">
    <ButtonDropdown.Item main>小</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="small">
    <ButtonDropdown.Item main>较小</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="medium">
    <ButtonDropdown.Item main>中等</ButtonDropdown.Item>
  </ButtonDropdown>
  <Spacer y={.5} />
  <ButtonDropdown size="large">
    <ButtonDropdown.Item main>最大的</ButtonDropdown.Item>
  </ButtonDropdown>
</>
`}
/>

<Playground
  title="多类型"
  desc="为每个按钮设定不同的类型。"
  scope={{ ButtonDropdown }}
  code={`
<ButtonDropdown>
  <ButtonDropdown.Item main>访问账户</ButtonDropdown.Item>
  <ButtonDropdown.Item>屏蔽账户</ButtonDropdown.Item>
  <ButtonDropdown.Item>锁定账户</ButtonDropdown.Item>
  <ButtonDropdown.Item type="error">移除账户</ButtonDropdown.Item>
</ButtonDropdown>
`}
/>

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

| 属性         | 描述               | 类型             | 推荐值                                                  | 默认      |
| ------------ | ------------------ | ---------------- | ------------------------------------------------------- | --------- |
| **type**     | 按钮类型           | `NormalTypes`    | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **size**     | 按钮的大小         | `NormalSizes`    | `'mini', 'small', 'medium', 'large'`                    | `medium`  |
| **loading**  | 显示加载中的指示器 | `boolean`        | -                                                       | `false`   |
| **auto**     | 自动缩放宽度       | `boolean`        | -                                                       | `false`   |
| **disabled** | 禁用所有按钮       | `boolean`        | -                                                       | `false`   |
| ...          | 原生属性           | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...`                 | -         |

<Attributes.Title>ButtonDropdown.Item.Props</Attributes.Title>

| 属性        | 描述             | 类型                   | 推荐值                                                  | 默认      |
| ----------- | ---------------- | ---------------------- | ------------------------------------------------------- | --------- |
| **type**    | 当前单个按钮类型 | `NormalTypes`          | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **main**    | 是否为主要按钮   | `boolean`              | -                                                       | `false`   |
| **onClick** | 按钮的点击事件   | `MouseEventHandler`    | -                                                       | -         |
| ...         | 原生属性         | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...`                        | -         |

</Attributes>

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