mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-25 21:05:36 +08:00
119 lines
3.2 KiB
Plaintext
119 lines
3.2 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Radio, Spacer, Code } from 'components'
|
|
import { useState } from 'react'
|
|
|
|
export const meta = {
|
|
title: 'radio',
|
|
description: 'avatar',
|
|
}
|
|
|
|
## Radio
|
|
|
|
Provides single user input from a selection of options.
|
|
|
|
<Playground
|
|
scope={{ Radio }}
|
|
code={`
|
|
<Radio checked={false}>Option 1</Radio>
|
|
`} />
|
|
|
|
<Playground
|
|
title="Group"
|
|
scope={{ Radio, useState }}
|
|
code={`
|
|
() => {
|
|
const [state, setState] = useState('1')
|
|
const handler = val => {
|
|
setState(val)
|
|
console.log(val)
|
|
}
|
|
return (
|
|
<>
|
|
<Radio.Group value={state} onChange={handler}>
|
|
<Radio value="1">Option 1</Radio>
|
|
<Radio value="2">Option 2</Radio>
|
|
</Radio.Group>
|
|
</>
|
|
)
|
|
}
|
|
`} />
|
|
|
|
<Playground
|
|
title="Description"
|
|
desc="`Description` can be combined with other `Components`."
|
|
scope={{ Radio, Code }}
|
|
code={`
|
|
<Radio.Group value="1" onChange={val => console.log(val)}>
|
|
<Radio value="1">
|
|
Option 1
|
|
<Radio.Description>Description for Option1</Radio.Description>
|
|
</Radio>
|
|
<Radio value="2">
|
|
Option 2
|
|
<Radio.Desc><Code>Description</Code> for Option2</Radio.Desc>
|
|
</Radio>
|
|
</Radio.Group>
|
|
`} />
|
|
|
|
|
|
<Playground
|
|
title="Disabled"
|
|
scope={{ Radio, useState, Code }}
|
|
code={`
|
|
<Radio.Group value="1" disabled>
|
|
<Radio value="1">Option 1</Radio>
|
|
<Radio value="2">Option 2</Radio>
|
|
</Radio.Group>
|
|
`} />
|
|
|
|
<Playground
|
|
title="Row"
|
|
desc="Horizontal arrangement."
|
|
scope={{ Radio, Code }}
|
|
code={`
|
|
<Radio.Group value="1" useRow>
|
|
<Radio value="1">
|
|
Option 1
|
|
<Radio.Desc>Description for Option1</Radio.Desc>
|
|
</Radio>
|
|
<Radio value="2">
|
|
Option 2
|
|
<Radio.Desc>Description for Option2</Radio.Desc>
|
|
</Radio>
|
|
</Radio.Group>
|
|
`} />
|
|
|
|
|
|
<Attributes edit="/pages/docs/components/radio.mdx">
|
|
<Attributes.Title>Radio.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **checked** | selected or not (in single) | `boolean` | - | `false` |
|
|
| **value** | unique ident value (in group) | `string` | - | - |
|
|
| **id** | native attr | `string` | - | - |
|
|
| **disabled** | disable current radio | `boolean` | - | `false` |
|
|
| **onChange** | change event | `(e: RadioEvent) => void` | - | - |
|
|
| ... | native props | `InputHTMLAttributes` | `'name', 'alt', 'className', ...` | - |
|
|
|
|
<Attributes.Title>Radio.Group.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **initialValue** | initial value | `string` | - | - |
|
|
| **value** | selected child radio | `string` | - | - |
|
|
| **useRow** | horizontal layout | `boolean` | - | `false` |
|
|
| **disabled** | disable all radios | `boolean` | - | `false` |
|
|
| **onChange** | change event | `(value: string) => void` | - | - |
|
|
| ... | native props | `HTMLAttributes` | `'name', 'id', 'className', ...` | - |
|
|
|
|
<Attributes.Title alias="Radio.Desc">Radio.Description.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| ... | native props | `HTMLAttributes` | `'name', 'id', 'className', ...` | - |
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|