mpx-cube-ui

# Cube-Radio

# 介绍

基本组件-单选框，用于设置单个选项的值。

# 示例

# 正常选项

option下的value属性表示选中后的值，通过 wx:model双向绑定该值。

在该示例中，两个单选框绑定了同一个响应式变量，在点击第一个单选框时，就会变为Option1，所以第一个单选框激活。

收起 
<template>
  <view class="radio-demo">
    <view-desc>正常选项: {{ radioValue }}</view-desc>
    <view class="cube-radio-demos">
      <cube-radio  option="{{ radio1 }}" wx:model="{{ radioValue }}" wx:model-prop="value">Option1</cube-radio>
      <cube-radio  option="{{ radio2 }}" wx:model="{{ radioValue }}" wx:model-prop="value">Option2</cube-radio>
    </view>
  </view>
</template>
1
2
3
4
5
6
7
8
9
收起 
<script>
import { createComponent } from '@mpxjs/core'

createComponent({
  options: {
    styleIsolation: 'shared'
  },
  data: {
    radio1: {
      value: 'Option1'
    },
    radio2: {
      value: 'Option2'
    },
    radioValue: ''
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 禁用选项

通过 disabled 属性控制。

收起 
<template>
  <view class="radio-disabled-demo">
    <view-desc>禁用选项: {{ radioValue }}</view-desc>
    <view class="cube-radio-demos">
      <cube-radio

        option="{{ radio }}"
        wx:model="{{ radioValue }}"
        wx:model-prop="value"
      >disabledOption</cube-radio>
    </view>
  </view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
收起 
<script>
import { createComponent } from '@mpxjs/core'

createComponent({
  options: {
    styleIsolation: 'shared'
  },
  data: {
    radio: {
      value: 'disabledOption',
      disabled: true
    },
    radioValue: ''
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 图标位置

通过option下的position属性控制图标展示方位，right表示图标展示在右侧。

收起 
<template>
  <view class="radio-ui-right-demo">
    <view-desc>图标展示在右侧: {{ radioValue }}</view-desc>
    <view class="cube-radio-demos">
      <cube-radio  option="{{ radio1 }}" wx:model="{{ radioValue }}" wx:model-prop="value"></cube-radio>
      <cube-radio  option="{{ radio2 }}" wx:model="{{ radioValue }}" wx:model-prop="value"></cube-radio>
    </view>
  </view>
</template>
1
2
3
4
5
6
7
8
9
收起 
<script>
import { createComponent } from '@mpxjs/core'

createComponent({
  options: {
    styleIsolation: 'shared'
  },
  data: {
    radio1: {
      text: 'Option1',
      value: 'Option1',
      position: 'right'
    },
    radio2: {
      text: 'Option2',
      value: 'Option2',
      position: 'right'
    },
    radioValue: ''
  }
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Props

参数 说明 类型 可选值 默认值
themeType 用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo String - -
option 配置项 Object Option Option
value 双向绑定属性值 String String/Number -

# TsType

Name Type
Option 
{
  desc?: string;
  disabled?: boolean;
  position?: left|right;
  text?: string;
  value: string|number;
}

# Events

事件名 说明 参数
input 绑定值变化时触发 事件对象 e，包含选中的单选框 value 值

# Slots

插槽名 说明
— (默认插槽) 自定义文本插槽内容

# CSS Variable

变量名 默认值 含义
$radio-color
#c8c9cc
 单选框主色
$radio-inner-ui-bgc 内部主色
$radio-ui-bgc
#fff
 背景色
$radio-ui-bgc_disabled 禁用背景色
$radio-ui-bgimg
none
 背景图
$radio-ui-bgc-opacity
.3
 背景色透明度
$radio-ui-width
18px
 宽度
$radio-inner-ui-width
10px
 内部选中宽度
$radio-inner-ui-scale-size
1
 内部选中缩放比例
$radio-ui-scale-size
1
 缩放比例
$radio-ui-border
1px solid $radio-color
 边框
$radio-ui-border_disabled 禁用外边框
$radio-ui-border_checked 选中外边框
$radio-ui-margin
0 0 0 10px
 外边距
$radio-label-mr_left
10px
 标签左边距
$radio-label-mr_right
28px
 标签右边距
$radio-label-padding
10px 0
 标签内边距
$radio-inner-ui-tick
tick-radio-passenger
 对勾图标
$radio-ui_checked-transition
none
 选中过渡
$radio-ui-transform
none
 选中变换
$radio-desc-margin-top
5px
 描述文案上边距
$radio-text-desc-color_disabled
unset
 描述文案禁用色值
$radio-text-font-size
18px
 文案字号
$radio-desc-font-size
12px
 描述文案字号
$radio-text-color 文案颜色
$radio-desc-color
#757575
 描述文案颜色
$radio-text-line-height
1
 文案行高
$radio-desc-line-height
1.2
 描述文案行高

← RadioGroup 单选框组 →