Radio 单选框组件文档 BeerUi-官方文档

Radio 单选框

在一组备选项中进行单选

基础用法

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

		
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

Contributors

Resource

Github