- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## Radio 单选框

在一组备选项中进行单选

### 基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

radio: 1
备选项1
备选项2
备选项2
备选项2
备选项2

    import { BeRadio, BeRadioGroup} from '@brewer/beerui'
    let radio = '1';

    <BeRadio bind:checked={radio} label='1'>备选项1</BeRadio>
    <BeRadio bind:checked={radio} label='2'>备选项2</BeRadio>

显示代码

### 禁用状态

多选框不可用状态。

radio2: 1
备选项1
备选项2

    let radio2 = '1';

    <BeRadio bind:checked={radio2} label='1' disabled>备选项1</BeRadio>
    <BeRadio bind:checked={radio2} label='2'>备选项2</BeRadio>

显示代码

### 单选框组

适用于在多个互斥的选项中选择的场景。

radio3: 1
备选项
备选项
备选项

    let radio3 = '1';
    let checkedDom = null
    const handleChange = (evt) => console.log('handleChange', evt);
    const changeRadio = () => radio3 = '2'
    const clearChecked = () => checkedDom.clear()

    <BeButton on:click={changeRadio}>setChecked('2')</BeButton>
    <BeRadioGroup bind:this={checkedDom} bind:checked={radio3} on:change={handleChange}>
    	<BeRadio label='1'>备选项</BeRadio>
    	<BeRadio label='2'>备选项</BeRadio>
    	<BeRadio label='3'>备选项</BeRadio>
    </BeRadioGroup>

显示代码

### Radio Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
checked | 绑定值 | string / number / boolean | — | —
label | Radio 的 value | string / number / boolean | — | —
disabled | 是否禁用 | boolean | — | false
border | 是否显示边框 | boolean | — | false
size | Radio 的尺寸，仅在 border 为真时有效 | string | medium / small / mini | —
name | 原生 name 属性 | string | — | —

### Radio / Radio Group Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 绑定值变化时触发的事件 | 选中的 Radio label 值

### Radio-group Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
checked | 绑定值 | string / number / boolean | — | —
size | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string | medium / small / mini | —
disabled | 是否禁用 | boolean | — | false
textColor | 按钮形式的 Radio 激活时的文本颜色 | string | — | #ffffff
fill | 按钮形式的 Radio 激活时的填充色和边框色 | string | — | #409EFF

### Slot

name | 说明
--- | ---
default | 替代label