kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-01-25 05:07:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(button-group): add docs for button-group

Browse Source 
docs: add docs
This commit is contained in:
unix
2020-05-11 18:36:25 +08:00
parent fcd42f1700
commit 3dce6beefa
3 changed files with 191 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/data/metadata-zh-cn.json
View File

File diff suppressed because one or more lines are too long

79
pages/en-us/components/button-group.mdx
View File

@@ -14,20 +14,89 @@ A set of related buttons.
title="Basic"
scope={{ Button, ButtonGroup }}
code={`
<ButtonGroup ghost type="success">
<Button >Action</Button>
<span />
<Button >Action</Button>
<ButtonGroup>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
`} />
<Playground
title="Variant"
desc="set the type or styles of all buttons in the group."
scope={{ Button, ButtonGroup }}
code={`
<>
<ButtonGroup type="success">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup type="abort">
<Button>Action1</Button>
<Button>Action2</Button>
</ButtonGroup>
<ButtonGroup type="warning" ghost>
<Button>Action1</Button>
<Button>Action2</Button>
</ButtonGroup>
</>
`} />
<Playground
title="Sizes"
scope={{ Button, ButtonGroup }}
code={`
<>
<ButtonGroup size="small">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup size="mini">
<Button>Action1</Button>
<Button>Action2</Button>
</ButtonGroup>
</>
`} />
<Playground
title="Vertical"
scope={{ Button, ButtonGroup }}
code={`
<>
<ButtonGroup size="small" vertical>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
<Button>Four</Button>
</ButtonGroup>
</>
`} />
<Playground
title="Disabled"
desc="disable all buttons in the group."
scope={{ Button, ButtonGroup }}
code={`
<>
<ButtonGroup size="small" disabled>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
</>
`} />
<Attributes edit="/pages/en-us/components/button-group.mdx">
<Attributes.Title>Button.Props</Attributes.Title>
<Attributes.Title>ButtonGroup.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- | -------------- | ------ |
| **type** | button type | `ButtonTypes` | [ButtonTypes](#buttontypes) | `default` |
| **size** | button size | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
| **ghost** | the opposite color | `boolean` | - | `false` |
| **vertical** | show all buttons vertically | `boolean` | - | `false` |
| **disabled** | disable all buttons | `boolean` | - | `false` |
| ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>ButtonTypes</Attributes.Title>

116
pages/zh-cn/components/button-group.mdx Normal file
View File

@@ -0,0 +1,116 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer, ButtonGroup } from 'components'
export const meta = {
title: '按钮组 Button-Group',
group: '数据录入',
}
## Button Group / 按钮组
展示一组具备相关性的按钮。
<Playground
title="基础"
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">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup type="abort">
<Button>Action1</Button>
<Button>Action2</Button>
</ButtonGroup>
<ButtonGroup type="warning" ghost>
<Button>Action1</Button>
<Button>Action2</Button>
</ButtonGroup>
</>
`} />
<Playground
title="大小"
scope={{ Button, ButtonGroup }}
code={`
<>
<ButtonGroup size="small">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup size="mini">
<Button>Action1</Button>
<Button>Action2</Button>
</ButtonGroup>
</>
`} />
<Playground
title="垂直的"
scope={{ Button, ButtonGroup }}
code={`
<>
<ButtonGroup size="small" vertical>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
<Button>Four</Button>
</ButtonGroup>
</>
`} />
<Playground
title="禁用"
desc="禁用组内所有的按钮。"
scope={{ Button, ButtonGroup }}
code={`
<>
<ButtonGroup size="small" disabled>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
</>
`} />
<Attributes edit="/pages/zh-cn/components/button-group.mdx">
<Attributes.Title>ButtonGroup.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认
| ---------- | ---------- | ---- | -------------- | ------ |
| **type** | 按钮类型 | `ButtonTypes` | [ButtonTypes](#buttontypes) | `default` |
| **size** | 按钮大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
| **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'
```
<Attributes.Title>NormalSizes</Attributes.Title>
```ts
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```
</Attributes>
export default ({ children }) => <Layout meta={meta}>{children}</Layout>