Radio 单选框
和 Select
的区别是,Radio
所有选项默认可见,方便用户在比较中选择,因此选项不宜过多。
基础用法
可使用 size
属性改变选择大小。 除了默认大小外,还有另外两个选项: large
, mini
。
html
<os-radio
v-model="status">
Option
</os-radio>
禁用状态
设置 disabled
属性即可禁用多选框。
单选框组
使用组件os-radio-group
作为容器。
你已选择:Option 4
html
<os-radio-group v-model="statusGroup">
<os-radio label="Option 1"></os-radio>
<os-radio label="Option 2" class="os-margin-left-base"></os-radio>
<os-radio label="Option 3" class="os-margin-left-base"></os-radio>
<os-radio label="Option 4" class="os-margin-left-base" disabled></os-radio>
</os-radio-group>
按钮样式
os-radio-group
容器中属性mode
能更改选项样式,目前有 default
| button
两个参数。
os-radio-group
容器中属性type
能更改按钮样式,只有设置为button
时,能才使用,可参考Button
中type
参数。
html
<os-radio-group
v-model="statusGroup"
mode="button"
type="primary"
>
<os-radio label="Option 1"></os-radio>
<os-radio label="Option 2" class="os-margin-left-base"></os-radio>
<os-radio label="Option 3" class="os-margin-left-base"></os-radio>
<os-radio label="Option 4" class="os-margin-left-base" disabled></os-radio>
</os-radio-group>