mirror of
https://github.com/zhigang1992/react.git
synced 2026-05-27 09:03:45 +08:00
091751959e
* docs: export individual style types for each component * docs: improve the copywriting content of the document * docs: optimize the document site experience on mobile devices
104 lines
2.6 KiB
Plaintext
104 lines
2.6 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Toggle, Spacer } from 'components'
|
|
|
|
export const meta = {
|
|
title: 'Toggle',
|
|
group: 'Data Entry',
|
|
}
|
|
|
|
## Toggle
|
|
|
|
Displays a boolean value.
|
|
|
|
<Playground
|
|
scope={{ Toggle, Spacer }}
|
|
code={`
|
|
<>
|
|
<Toggle />
|
|
<Spacer h={.5} />
|
|
<Toggle initialChecked />
|
|
</>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Type"
|
|
desc="Differentiate states by color."
|
|
scope={{ Toggle, Spacer }}
|
|
code={`
|
|
<>
|
|
<Toggle type="default" initialChecked />
|
|
<Spacer h={.5} />
|
|
<Toggle type="secondary" initialChecked />
|
|
<Spacer h={.5} />
|
|
<Toggle type="success" initialChecked />
|
|
<Spacer h={.5} />
|
|
<Toggle type="warning" initialChecked />
|
|
<Spacer h={.5} />
|
|
<Toggle type="error" initialChecked />
|
|
</>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="disabled"
|
|
scope={{ Toggle, Spacer }}
|
|
code={`
|
|
<>
|
|
<Toggle disabled />
|
|
<Spacer h={.5} />
|
|
<Toggle initialChecked disabled />
|
|
</>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="get change"
|
|
scope={{ Toggle, Spacer }}
|
|
code={`
|
|
() => {
|
|
const handler = event => {
|
|
console.log(event.target.checked)
|
|
}
|
|
return <Toggle onChange={handler} />
|
|
}
|
|
`}
|
|
/>
|
|
|
|
<Attributes edit="/pages/en-us/components/toggle.mdx">
|
|
<Attributes.Title>Toggle.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default |
|
|
| ------------------ | ------------------------- | --------------------- | ---------------------------------- | --------- |
|
|
| **checked** | checked or not | `boolean` | - | - |
|
|
| **initialChecked** | checked or not on initial | `boolean` | - | `false` |
|
|
| **onChange** | change event handler | `ToggleEvent` | - | - |
|
|
| **type** | current type | `ToggleTypes` | [ToggleTypes](#toggletypes) | `default` |
|
|
| **disabled** | disable toggle | `boolean` | - | `false` |
|
|
| ... | native props | `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.Title>ToggleTypes</Attributes.Title>
|
|
|
|
```ts
|
|
type ToggleTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
|
|
```
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|