跳到主要内容

Radio 单选

示例​

import { Header, ScrollView, TopView, Form, FormItem, Card, Divider, DividerGroup, Radio, RadioGroup, Button } from '@/duxuiExample'

const UserButton = ({
  label,
  checked,
  onCheck
}) => {
  return <Button onClick={onCheck} type='primary' plain={!checked}>{label}</Button>
}

export default function RadioExample() {
  return <TopView>
    <Header title='Radio' />
    <Form onSubmit={console.log}>
      <ScrollView>
        <Card margin verticalPadding={false}>
          <DividerGroup>
            <FormItem label='单选' field='radio1'>
              <RadioGroup>
                <Radio label='选项1' value={1} />
                <Radio label='选项2' value={2} />
                <Radio label='选项3' value={3} />
                <Radio label='选项4' value={4} />
              </RadioGroup>
            </FormItem>
            <FormItem label='竖向排列' field='radio2'>
              <RadioGroup vertical>
                <Radio label='选项1' value={1} />
                <Radio label='选项2' value={2} />
                <Radio label='选项3' value={3} />
                <Radio label='选项4' value={4} />
              </RadioGroup>
            </FormItem>
            <FormItem label='自定义样式' field='radio3'>
              <RadioGroup>
                <Radio label='选项1' value={1} >{UserButton}</Radio>
                <Radio label='选项2' value={2} >{UserButton}</Radio>
                <Radio label='选项3' value={3} >{UserButton}</Radio>
                <Radio label='选项4' value={4} >{UserButton}</Radio>
              </RadioGroup>
            </FormItem>
          </DividerGroup>
        </Card>
      </ScrollView>
    </Form>
  </TopView>
}

Props​

继承自SpaceProps

value​

当前选项的值

类型必填默认值
any是

label​

当前选项的标签文字

类型必填默认值
any否

type​

选中态的主题类型，默认主色，可选与 Button/Checkbox 一致的内置色系

类型必填默认值
enum('primary', 'secondary', 'success', 'warning', 'danger')否primary

checked​

如果单独使用 Radio 可以用这个属性控制是否选中

类型必填默认值
boolean否false

disabled​

是否禁用这个选项

类型必填默认值
boolean否false

RadioGroup Props​

将Radio选项放在 RadioGroup 中，将他们组成一个表单项

继承自SpaceProps

multiple​

是否多选

开启后 value / defaultValue / onChange 将变成数组结构

类型必填默认值
boolean否false

value​

选中值

类型必填默认值
any否

defaultValue​

默认值

类型必填默认值
any否

onChange​

值改变时的回调函数

类型必填默认值
(value: any) => void否

vertical​

是否垂直布局

类型必填默认值
boolean否false

virtual​

虚拟节点，为true时，这个组件不会创建任何实体节点，可以更有效的进行布局

类型必填默认值
boolean否false

disabled​

禁用选择

类型必填默认值
boolean否false

cancel​

允许取消选择

类型必填默认值
boolean否