kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-01-31 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(button): add docs for icons

Browse Source
This commit is contained in:
unix
2020-05-07 23:54:19 +08:00
parent 9fe7f1e2ce
commit 3710355cd4
2 changed files with 81 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
pages/en-us/components/button.mdx
View File

@@ -1,6 +1,10 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer } from 'components'
import Router from 'next/router'
import Settings from '@zeit-ui/react-icons/settings'
import UserX from '@zeit-ui/react-icons/userX'
import Power from '@zeit-ui/react-icons/power'
export const meta = {
title: 'button',
@@ -11,7 +15,6 @@ export const meta = {
Used to trigger an operation.
<Playground
title="Basic"
desc="The basic `Button` contains an animation effect."
@@ -86,21 +89,55 @@ Used to trigger an operation.
</>
`} />
<Playground
title="With Icons"
desc="The `color` and `size` of the icon will be set automatically."
scope={{ Button, Spacer, Settings, UserX, Power }}
code={`
<>
<Button iconRight={<Power />} auto size="small">shut off</Button>
<Spacer y={.5} />
<Button icon={<Settings />} auto>Action</Button>
<Spacer y={.5} />
<Button icon={<Settings />} type="success" size="small">Success</Button>
<Spacer y={.5} />
<Button icon={<Settings />} type="secondary">Success</Button>
<Spacer y={.5} />
<Button icon={<UserX />} type="error" ghost>Remove User</Button>
<Spacer y={.5} />
<Button icon={<UserX />} disabled>Remove User</Button>
</>
`} />
<Attributes edit="/pages/en-us/components/button.mdx">
<Attributes.Title>Button.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- | -------------- | ------ |
| **type** | button type | `ButtonTypes` | `'default', 'secondary', 'success', 'warning', 'error', 'abort'` | `default` |
| **size** | button size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
| **type** | button type | `ButtonTypes` | [ButtonTypes](#buttontypes) | `default` |
| **size** | button size | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
| **ghost** | the opposite color | `boolean` | - | `false` |
| **loading** | display loading indicator | `boolean` | - | `false` |
| **shadow** | display shadow | `boolean` | - | `false` |
| **auto** | autoscale width | `boolean` | - | `false` |
| **effect** | display animation | `boolean` | - | `true` |
| **disabled** | disable button | `boolean` | - | `false` |
| **icon** | show icon in button | `ReactNode` | - | - |
| **iconRight** | show icon on the other side of the button | `ReactNode` | - | - |
| **onClick** | click handler | `MouseEventHandler` | - | - |
| ... | native props | `ButtonHTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |
| ... | native props | `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>

43
pages/zh-cn/components/button.mdx
View File

@@ -1,6 +1,9 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer } from 'components'
import Router from 'next/router'
import Settings from '@zeit-ui/react-icons/settings'
import UserX from '@zeit-ui/react-icons/userX'
import Power from '@zeit-ui/react-icons/power'
export const meta = {
title: '按钮 Button',
@@ -85,13 +88,33 @@ export const meta = {
</>
`} />
<Playground
title="图标"
desc="按钮内的图标色彩和大小将会被自动设置。"
scope={{ Button, Spacer, Settings, UserX, Power }}
code={`
<>
<Button iconRight={<Power />} auto size="small">关闭</Button>
<Spacer y={.5} />
<Button icon={<Settings />} auto>按钮</Button>
<Spacer y={.5} />
<Button icon={<Settings />} type="success" size="small">成功</Button>
<Spacer y={.5} />
<Button icon={<Settings />} type="secondary">成功</Button>
<Spacer y={.5} />
<Button icon={<UserX />} type="error" ghost>移除用户</Button>
<Spacer y={.5} />
<Button icon={<UserX />} disabled>移除用户</Button>
</>
`} />
<Attributes edit="/pages/zh-cn/components/button.mdx">
<Attributes.Title>Button.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认
| ---------- | ---------- | ---- | -------------- | ------ |
| **type** | 按钮的类型 | `ButtonTypes` | `'default', 'secondary', 'success', 'warning', 'error', 'abort'` | `default` |
| **size** | 按钮的大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
| **type** | 按钮的类型 | `ButtonTypes` | [ButtonTypes](#buttontypes) | `default` |
| **size** | 按钮的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
| **ghost** | 是否为反色按钮 | `boolean` | - | `false` |
| **loading** | 是否显示加载中的指示器 | `boolean` | - | `false` |
| **shadow** | 是否显示阴影 | `boolean` | - | `false` |
@@ -99,7 +122,21 @@ export const meta = {
| **effect** | 是否显示动画效果 | `boolean` | - | `true` |
| **disabled** | 是否禁用按钮 | `boolean` | - | `false` |
| **onClick** | 点击事件 | `MouseEventHandler` | - | - |
| ... | 原生属性 | `ButtonHTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - |
| **icon** | 在按钮内显示图标 | `ReactNode` | - | - |
| **iconRight** | 在按钮的另一侧显示图标 | `ReactNode` | - | - |
| ... | 原生属性 | `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>