IBest-UI@HarmonyOS

Appearance

Radio 单选框 ​

介绍 ​

在一组备选项中进行单选。

引入 ​

ts
import { IBestRadio, IBestRadioGroup } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

TIP

• 通过 group 属性绑定 IBestRadioGroup 与 IBestRadio 的关系, group 值需具有全局唯一性。
• IBestRadio 组件的 name 值在同一 group 中需具备唯一性。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State active: string = "1"
  build() {
    IBestRadioGroup({ group: this.group, active: $active }){
      IBestRadio({
        group: this.group,
        label: '单选框1',
        name: '1'
      })
      IBestRadio({
        group:this.group,
        label: '单选框2',
        name: '2'
      })
    }
  }
}

水平排列 ​

水平排列

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State active: string = "1"
  build() {
    IBestRadioGroup({ group: this.group, active: $active, placeDirection: Axis.Horizontal }){
      IBestRadio({
        group: this.group,
        label: '单选框1',
        name: '1'
      })
      IBestRadio({
        group:this.group,
        label: '单选框2',
        name: '2'
      })
    }
  }
}

禁用状态 ​

禁用状态

TIP

在 Radio 上设置 disabled 可以禁用单个选项。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State active: string = "1"
  build() {
    IBestRadioGroup({ group: this.group, active: $active }){
      IBestRadio({
        group: this.group,
        label: '单选框1',
        disabled: true,
        name: '1'
      })
      IBestRadio({
        group:this.group,
        label: '单选框2',
        name: '2'
      })
    }
  }
}

自定义形状 ​

自定义形状

TIP

shape 属性可选值为 square 和 dot，单选框形状分别对应方形和圆点形。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State active: string = "1"
  build() {
    IBestRadioGroup({ group: this.group, active: $active }){
      IBestRadio({
        group: this.group,
        label: '单选框1',
        shape: 'square',
        name: '1'
      })
      IBestRadio({
        group:this.group,
        label: '单选框2',
        shape: 'dot',
        name: '2'
      })
    }
  }
}

自定义颜色 ​

自定义颜色

TIP

通过 checkedColor 属性设置选中状态的图标颜色。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State active: string = "1"
  build() {
    IBestRadioGroup({ group: this.group, active: $active }){
      IBestRadio({
        group: this.group,
        label: '单选框',
        shape: 'square',
        checkedColor: '#ee0a24',
        name: '1'
      })
      IBestRadio({
        group: this.group,
        label: '单选框',
        checkedColor: '#ee0a24',
        name: '2'
      })
      IBestRadio({
        group: this.group,
        label: '单选框',
        shape: 'dot',
        checkedColor: '#ee0a24',
        name: '3'
      })
    }
  }
}

自定义大小 ​

自定义大小

TIP

通过 iconSize 属性可以自定义图标和文字的大小。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State active: string = "1"
  build() {
    IBestRadioGroup({ group: this.group, active: $active }){
      IBestRadio({
        group: this.group,
        label: '自定义大小',
        iconSize: 30,
        name: '1'
      })
      IBestRadio({
        group: this.group,
        label: '自定义大小',
        iconSize: 30,
        name: '2'
      })
    }
  }
}

左侧文本 ​

左侧文本

TIP

将 labelPosition 属性设置为 'left'，可以将文本位置调整到单选框左侧。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State active: string = "1"
  build() {
    IBestRadioGroup({ group: this.group, active: $active }){
      IBestRadio({
        group: this.group,
        label: '单选框',
        labelPosition: 'left',
        name: '1'
      })
      IBestRadio({
        group: this.group,
        label: '单选框',
        labelPosition: 'left',
        name: '2'
      })
    }
  }
}

禁用文本点击 ​

禁用文本点击

TIP

设置 labelDisabled 属性后，点击图标以外的内容不会触发单选框切换。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State active: string = "1"
  build() {
    IBestRadioGroup({ group: this.group, active: $active }){
      IBestRadio({
        group: this.group,
        label: '单选框',
        labelDisabled: true,
        name: '1'
      })
      IBestRadio({
        group: this.group,
        label: '单选框',
        labelDisabled: true,
        name: '2'
      })
    }
  }
}

搭配单元格组件使用 ​

搭配单元格组件使用

TIP

搭配单元格组件使用时，需要再引入 IBestCell 和 IBestCellGroup 组件。

点我查看代码
ts
import { IBestCell } from '@ibestservices/ibset-ui'
@Entry
@Component
struct DemoPage {
  @State group: string = "group"
  @State active: string = "1"
  @Builder CellRadio(name: string, group: string) {
    IBestRadio({ name, group })
  }
  build() {
    IBestRadioGroup({ group: this.group, active: $active }){
      IBestCell({
        title: '单选框1',
        rightIconBuilder: () => this.CellRadio('1', this.group),
        clickable: true,
        onClickCell: () => {
          this.active = '1'
        }
      })
      IBestCell({
        title: '单选框2',
        rightIconBuilder: () => this.CellRadio('2', this.group),
        hasBorder: false,
        clickable: true,
        onClickCell: () => {
          this.active = '2'
        }
      })
    }
  }
}

API ​

Radio @Props ​

参数说明类型默认值
name标识符，通常为一个唯一的字符串或数字，同一 group 的 name 不可重复string | number
group标识符，通常为一个唯一的字符串，需具备全局唯一性或已入栈的页面唯一性string
label显示的文本ResourceStr
iconSize图标大小number | string18
shape形状，可选值为 square dotstringround
disabled是否为禁用状态booleanfalse
labelDisabled是否禁用文本内容点击booleanfalse
labelPosition文本位置，可选值为 leftstringright
checkedColor选中状态颜色ResourceColor#1989fa
labelFontSize文本字体大小number | string16

Radio 插槽 ​

插槽名说明类型
defaultBuilderlabel 的插槽，优先级大于 label 属性data: { checked: boolean, disabled: boolean }
iconBuilder自定义图标插槽，需要自己调整选中与未选中展示的 UI 内容data: { checked: boolean, disabled: boolean }

RadioGroup @Props ​

参数说明类型默认值
group标识符，通常为一个唯一的字符串, 需保证全局唯一性string''
active激活的标识, 支持双向绑定string''
placeDirection排列方向AxisAxis.Vertical
space间距string | number12

RadioGroup Events ​

事件名说明事件类型
onChange选中状态改变的回调事件name: string

RadioGroup 插槽 ​

插槽名说明参数类型
defaultBuilder默认内容插槽-