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>