Skip to content
On this page

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时,能才使用,可参考Buttontype参数。

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>

Released under the MIT License.