mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-28 20:25:29 +08:00
92 lines
2.0 KiB
Plaintext
92 lines
2.0 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Toggle, Spacer } from 'components'
|
|
|
|
export const meta = {
|
|
title: '开关 Toggle',
|
|
group: '数据录入',
|
|
}
|
|
|
|
## Toggle / 开关
|
|
|
|
显示布尔值的状态。
|
|
|
|
<Playground
|
|
scope={{ Toggle, Spacer }}
|
|
code={`
|
|
<>
|
|
<Toggle />
|
|
<Spacer y={.5} />
|
|
<Toggle initialChecked />
|
|
</>
|
|
`} />
|
|
|
|
<Playground
|
|
title="禁用"
|
|
scope={{ Toggle, Spacer }}
|
|
code={`
|
|
<>
|
|
<Toggle disabled />
|
|
<Spacer y={.5} />
|
|
<Toggle initialChecked disabled />
|
|
</>
|
|
`} />
|
|
|
|
<Playground
|
|
title="大小"
|
|
desc="不同大小的开关组件。"
|
|
scope={{ Toggle, Spacer }}
|
|
code={`
|
|
<>
|
|
<Toggle size="small" />
|
|
<Spacer y={.5} />
|
|
<Toggle initialChecked size="medium" />
|
|
<Spacer y={.5} />
|
|
<Toggle initialChecked size="large" />
|
|
</>
|
|
`} />
|
|
|
|
<Playground
|
|
title="获取变化事件"
|
|
scope={{ Toggle, Spacer }}
|
|
code={`
|
|
() => {
|
|
const handler = event => {
|
|
console.log(event.target.checked)
|
|
}
|
|
return <Toggle onChange={handler} />
|
|
}
|
|
`} />
|
|
|
|
|
|
<Attributes edit="/pages/docs/components/toggle.mdx">
|
|
<Attributes.Title>Toggle.Props</Attributes.Title>
|
|
|
|
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **checked** | 是否选中 | `boolean` | - | - |
|
|
| **initialChecked** | 开关的初始状态 | `boolean` | - | `false` |
|
|
| **onChange** | 变化事件 | `ToggleEvent` | - | - |
|
|
| **size** | 开关组件的大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
|
|
| **disabled** | 禁用交互 | `boolean` | - | `false` |
|
|
| ... | 原生属性 | `LabelHTMLAttributes` | `'from', 'name', 'className', ...` | - |
|
|
|
|
|
|
<Attributes.Title>ToggleEvent</Attributes.Title>
|
|
|
|
```ts
|
|
interface ToggleEventTarget {
|
|
checked: boolean
|
|
}
|
|
|
|
export interface ToggleEvent {
|
|
target: ToggleEventTarget
|
|
stopPropagation: () => void
|
|
preventDefault: () => void
|
|
nativeEvent: React.ChangeEvent
|
|
}
|
|
```
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|