mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-29 04:35:32 +08:00
115 lines
3.2 KiB
Plaintext
115 lines
3.2 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Checkbox, Spacer } from 'components'
|
|
|
|
export const meta = {
|
|
title: '复选框 Checkbox',
|
|
group: '数据录入',
|
|
}
|
|
|
|
## Checkbox / 复选框
|
|
|
|
用于表示多个可选项。
|
|
|
|
|
|
<Playground
|
|
desc="设置 `initialChecked` 属性初始的状态。"
|
|
scope={{ Checkbox }}
|
|
code={`
|
|
<Checkbox initialChecked={true}>墨西哥</Checkbox>
|
|
`} />
|
|
|
|
<Playground
|
|
title="大小"
|
|
desc="不同大小的复选框。"
|
|
scope={{ Checkbox, Spacer }}
|
|
code={`
|
|
<>
|
|
<Checkbox checked={true} size="mini">最小</Checkbox>
|
|
<Spacer y={.5} />
|
|
<Checkbox checked={true} size="small">较小</Checkbox>
|
|
<Spacer y={.5} />
|
|
<Checkbox checked={true} size="medium">中等</Checkbox>
|
|
<Spacer y={.5} />
|
|
<Checkbox checked={true} size="large">最大</Checkbox>
|
|
</>
|
|
`} />
|
|
|
|
<Playground
|
|
title="禁用的"
|
|
scope={{ Checkbox, Spacer }}
|
|
code={`
|
|
<>
|
|
<Checkbox>悉尼</Checkbox>
|
|
<Spacer y={.5} />
|
|
<Checkbox disabled checked={true}>北京</Checkbox>
|
|
</>
|
|
`} />
|
|
|
|
<Playground
|
|
title="组"
|
|
desc="管理一组 `Checkbox`。"
|
|
scope={{ Checkbox, Spacer }}
|
|
code={`
|
|
() => {
|
|
const handler = value => {
|
|
console.log(value)
|
|
}
|
|
return (
|
|
<Checkbox.Group value={['sydney']} onChange={handler}>
|
|
<Checkbox value="sydney">悉尼</Checkbox>
|
|
<Checkbox value="beijing">北京</Checkbox>
|
|
<Checkbox value="london">伦敦</Checkbox>
|
|
<Checkbox value="tokyo">东京</Checkbox>
|
|
</Checkbox.Group>
|
|
)
|
|
}
|
|
`} />
|
|
|
|
<Attributes edit="/pages/zh-cn/components/checkbox.mdx">
|
|
<Attributes.Title>Checkbox.Props</Attributes.Title>
|
|
|
|
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **checked** | 是否选中 | `boolean` | - | - |
|
|
| **initialChecked** | 初始状态是否选中 | `boolean` | - | `false` |
|
|
| **onChange** | 复选框的变化事件 | `CheckboxEvent` | - | - |
|
|
| **value** | 唯一的鉴别值 (仅在组内可用) | `string` | - | - |
|
|
| **disabled** | 禁用复选框 | `boolean` | - | `false` |
|
|
| **size** | 复选框的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
|
|
| ... | 原生属性 | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
|
|
|
|
<Attributes.Title>Checkbox.Group.Props</Attributes.Title>
|
|
|
|
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **value** | 选中的一组值 | `Array<string>` | - | `[]` |
|
|
| **disabled** | 禁用一个组的复选框 | `boolean` | - | `false` |
|
|
| **onChange** | 复选框的变化事件 | `(values: string[]) => void` | - | - |
|
|
| **size** | 组内所有复选框的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
|
|
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
|
|
|
|
<Attributes.Title>NormalSizes</Attributes.Title>
|
|
|
|
```ts
|
|
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
|
|
```
|
|
|
|
<Attributes.Title>CheckboxEvent</Attributes.Title>
|
|
|
|
```ts
|
|
interface CheckboxEventTarget {
|
|
checked: boolean
|
|
}
|
|
|
|
export interface CheckboxEvent {
|
|
target: CheckboxEventTarget
|
|
stopPropagation: () => void
|
|
preventDefault: () => void
|
|
nativeEvent: React.ChangeEvent
|
|
}
|
|
```
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|