直接跳到内容

RadioButton / RadioSet 单选按钮

RadioButton 是单个单选按钮组件;RadioSet 是单选按钮组容器,将多个 RadioButton 组合在一起并自动实现互斥选择逻辑。

底层:Textual RadioButtonTextual RadioSet

基本用法

RadioButton Props

属性类型默认值说明
labelstr""单选按钮右侧显示的文字
valueboolFalse单选按钮是否选中
button_innerstr"●"选中状态时内部显示的符号(可自定义)

RadioSet Props

属性类型默认值说明
selected_indexint0当前选中的 RadioButton 索引(从 0 开始),v-model 绑定此属性

v-model

  • RadioButtonv-model 默认绑定属性:value
  • RadioSetv-model 默认绑定属性:selected_index
vue
<!-- 单独使用 RadioButton -->
<RadioButton label="同意" v-model="agreed.value" />

<!-- RadioSet 获取选中索引 -->
<RadioSet v-model="lang_index.value">
  <RadioButton label="Python" />
  <RadioButton label="Go" />
</RadioSet>

事件

事件说明
radio_set_changedRadioSet 中选中项改变时触发(对应 Textual RadioSet.Changed),事件对象包含 indexpressed 属性
vue
<RadioSet v-model="selected.value" @radio_set_changed="on_change">
  <RadioButton label="选项一" />
  <RadioButton label="选项二" />
</RadioSet>

通用属性

所有 Textual-vuepy 组件均支持以下属性:

属性类型说明
idstr组件 CSS ID
stylestrTCSS 内联样式
classstrTCSS 类名(空格分隔)
border_titlestr边框标题
border_subtitlestr边框副标题
RadioButton / RadioSet 单选按钮已经加载完毕