单选框 Radio

单选框。

使用

ti-radio 基本使用

组件附带文字内容

<ti-radio></ti-radio>
<ti-radio label="文字内容"></ti-radio>
<ti-radio>文字内容</ti-radio>

默认选中状态

当设置 checked 时为受控模式，单选框的选中状态将由使用者控制，当设置 default-checked 时为非受控模式，选中状态将由组件内部控制。默认为非受控模式。

<ti-radio label="默认非受控模式"></ti-radio>
<ti-radio label="默认选中，受控模式" checked></ti-radio>
<ti-radio label="默认选中，非受控模式" default-checked></ti-radio>

禁用点击效果

当设置 disabled 时，组件将禁用组件的图标和文字的点击切换效果，当设置 label-disabled 时将禁用文字的点击效果，实现更细粒的控制。

<ti-radio label="禁用全部点击效果" disabled></ti-radio>
<ti-radio label="禁用文字点击效果" label-disabled></ti-radio>

修改单选框的圆角度数

单选框可自定义边框角度，支持方形（square）、圆形（circle）和自定义角度，默认为圆形。

当自定义角度时，单位为 px

<ti-radio label="方型" shape="square"></ti-radio>
<ti-radio label="圆型" shape="circle"></ti-radio>
<ti-radio label="自定义角度" shape="6"></ti-radio>

组件图标设置

单选框支持自定义组件图标, 图标大小，图标颜色等。

<ti-radio label="默认图标" default-checked></ti-radio>
<ti-radio label="自定义图标大小" size="64" default-checked></ti-radio>
<ti-radio label="自定义图标" icon="plus" default-checked></ti-radio>

监听单选框选中状态变化

index.html
index.js

code

<ti-radio label="监听切换状态变化" id="radio"></ti-radio>

document.querySelector("#radio").addEventListener("change", function(e) {
  console.log("e: ", e.detail ? "选中" : "取消选中");
});

TiRadioButton 示例

基本使用

组件附带文字内容。

<ti-radio-button label="复选按钮文字"></ti-radio-button>
<ti-radio-button>复选按钮文字</ti-radio-button>

默认选中状态

当设置 checked 时为受控模式，单选按钮的选中状态将由使用者控制，当设置 default-checked 时为非受控模式，选中状态将由组件内部控制。默认为非受控模式。

<ti-radio-button label="默认选中" checked></ti-radio-button>
<ti-radio-button label="默认选中" default-checked></ti-radio-button>

组件内容设置

单选按钮支持自定义前后内容，图标等。

<ti-radio-button label="设置右侧图标" icon="sort-inactive"></ti-radio-button>
<ti-radio-button label="自定义左侧内容">
    <ti-image ext-style="margin-right: 6px" slot="prefix" width="40" radius="0" height="40" src="..."></ti-image>
</ti-radio-button>
<ti-radio-button label="自定义右侧内容">
    <ti-image ext-style="margin-left: 6px" slot="suffix" width="40" radius="0" height="40" src="..."></ti-image>
</ti-radio-button>

改变单选按钮颜色

单选按钮默认根据主题色变化，如需改变按钮颜色可参考下面示例。

index.html
index.css

code

<ti-radio-button label="通过属性更改颜色" color="#2a6ae9" default-checked></ti-radio-button>
<div class="custom-radio">
    <ti-radio-button label="通过 css 变量更改颜色" default-checked></ti-radio-button>
</div>

.custom-radio {
  --radio-button-checked-border-color: rgba(30, 128, 255, 40%);
  --radio-button-checked-bg-color: rgba(30, 128, 255, 10%);
  --radio-button-checked-text-color: rgba(30, 128, 255, 100%);
}

监听单选按钮选中状态变化

index.html
index.js

code

<ti-radio-button label="监听切换状态变化" id="radio-button"></ti-radio-button>

document.querySelector('#radio-button').addEventListener('change', function(e) {
  console.log('e: ', e.detail ? '选中' : '取消选中');
})

TiRadioGroup 示例

基本使用

<ti-radio-group>
  <ti-radio label="文字内容-1" value="1"></ti-radio>
  <ti-radio label="文字内容-2" value="2"></ti-radio>
  <ti-radio label="文字内容-3" value="3"></ti-radio>
</ti-radio-group>

<ti-radio-group>
  <ti-radio-button label="文字内容-1" value="1"></ti-radio-button>
  <ti-radio-button label="文字内容-2" value="2"></ti-radio-button>
  <ti-radio-button label="文字内容-3" value="3"></ti-radio-button>
</ti-radio-group>

禁用所有单选框点击效果

当设置 disabled 时，子组件将禁用组件的图标和文字的点击切换效果，当设置 label-disabled 时将禁用子组件文字的点击效果，实现更细粒的控制。

<ti-radio-group disabled>
  <ti-radio label="整体禁用点击-1" value="1"></ti-radio>
  <ti-radio label="整体禁用点击-2" value="2"></ti-radio>
  <ti-radio label="整体禁用点击-3" value="3"></ti-radio>
</ti-radio-group>

<ti-radio-group label-disabled>
  <ti-radio label="文字禁用点击-1" value="1"></ti-radio>
  <ti-radio label="文字禁用点击-2" value="2"></ti-radio>
  <ti-radio label="文字禁用点击-3" value="3"></ti-radio>
</ti-radio-group>

<ti-radio-group disabled>
  <ti-radio-button label="禁用点击效果-1" value="1"></ti-radio-button>
  <ti-radio-button label="禁用点击效果-2" value="2"></ti-radio-button>
  <ti-radio-button label="禁用点击效果-3" value="3"></ti-radio-button>
</ti-radio-group>

设置单选框组合中的选中值

<ti-radio-group value="1">
  <ti-radio label="受控模式-1" value="1"></ti-radio>
  <ti-radio label="受控模式-2" value="2"></ti-radio>
  <ti-radio label="受控模式-3" value="3"></ti-radio>
</ti-radio-group>

<ti-radio-group default-value="1">
  <ti-radio label="非受控模式-1" value="1"></ti-radio>
  <ti-radio label="非受控模式-2" value="2"></ti-radio>
  <ti-radio label="非受控模式-3" value="3"></ti-radio>
</ti-radio-group>

<ti-radio-group value="1">
  <ti-radio-button label="受控模式-1" value="1"></ti-radio-button>
  <ti-radio-button label="受控模式-2" value="2"></ti-radio-button>
  <ti-radio-button label="受控模式-3" value="3"></ti-radio-button>
</ti-radio-group>

<ti-radio-group default-value="1">
  <ti-radio-button label="非受控模式-1" value="1"></ti-radio-button>
  <ti-radio-button label="非受控模式-2" value="2"></ti-radio-button>
  <ti-radio-button label="非受控模式-3" value="3"></ti-radio-button>
</ti-radio-group>

使用 options 创建单选框

此模式只支持 ti-radio。

index.html
index.js

code

<ti-radio-group id="ti-radio-group" default-value="a"></ti-radio-group>

window.onload = function(){
  var options = [
    { value: 'a', label: '选项 A' },
    { value: 'b', label: '选项 B' },
    { value: 'c', label: '选项 C' },
  ];
  var tiRadioGroup = document.getElementById("ti-radio-group");
  tiRadioGroup.options = options;
}

监听单选组合中选中状态变化

index.html
index.js

code

<ti-radio-group id="radio-group">
  <ti-radio label="监听切换状态变化-1" value="1"></ti-radio>
  <ti-radio label="监听切换状态变化-2" value="2"></ti-radio>
  <ti-radio label="监听切换状态变化-3" value="3"></ti-radio>
</ti-radio-group>

<ti-radio-group id="radio-button-group">
  <ti-radio-button label="监听切换状态变化-1" value="1"></ti-radio-button>
  <ti-radio-button label="监听切换状态变化-2" value="2"></ti-radio-button>
  <ti-radio-button label="监听切换状态变化-3" value="3"></ti-radio-button>
</ti-radio-group>

document.querySelector('#radio-group').addEventListener('change', function(e) {
  console.log('选中了 %s', e.detail);
})
document.querySelector('#radio-button-group').addEventListener('change', function(e) {
  console.log('选中了 %s', e.detail);
})

ti-radio API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
value	`string`	是	-	唯一标识符，根据 value 进行比较，判断是否选中	-
label	`string`	是	-	内容文字	-
checked	`boolean`	否	-	指定当前是否选中, 此模式下为受控型组件	-
default-checked	`boolean`	否	-	初始是否选中, 此模式下为非受控型组件	-
disabled	`boolean`	否	-	是否被禁用	-
label-disabled	`boolean`	否	-	是否禁用文本点击效果	-
icon	`string`	否	`checkbox-hollow`	自定义图标名称	-
size	`number`	否	`32`	自定义图标尺寸	-
shape	`square` \| `circle` \| `number`	否	circle	单选框圆角度数	-
color	`string`	否	-	自定义图标颜色	-

事件 Events

名称	参数列表	描述	备注
change	`(e: CustomEvent<string \| number>) => void`	单选框选中时触发的事件	当被 `ti-tadio-group` 包裹时，只有 `ti-tadio-group` 的 `change` 会被触发

插槽 Slots

名称	说明	备注
icon	图标插槽	当 `icon=false` 或者 icon 不存在时，使用此插槽

可扩展样式名 External Class

名称	说明	备注
ext-class	根节点可扩展的类名	-
icon-class	图标节点可扩展的类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
`--radio-radius`	`theme.borderRadius.round`	圆角	-
`--radio-gap`	`theme.spacing.gap.g3`	文字与图标间距	-
`--radio-padding-v`	`theme.spacing.vertical.v0`	上下Padding	-
`--radio-padding-h`	`theme.spacing.horizontal.h0`	左右Padding	-
`--radio-label-color`	`theme.color.gray.texticon.900`	Label文字，颜色	-
`--radio-direction`	`row`	-	-
`--radio-icon-color`	`theme.color.brand.1000`	↳ 背景颜色	-
`--radio-icon-revert-color`	`theme.color.gray.texticon.invert`	-	-
`--radio-align-items`	`center`	-	-
`--radio-icon-wrap-padding-v`	`0`	-	-
`--radio-icon-wrap-padding-h`	`0`	-	-
`--radio-label-font-size`	`theme.fontSize.t6`	Label文字，字号
`--radio-label-font-weight`	`theme.fontWeight.regular`	Label文字，字重
`--radio-label-line-height`	`theme.lineHeight.single.t6`	Label文字，行高

ti-tadio-button API

属性 Properties

名称	类型	必填	默认值	说明	备注
label	`string`	否	-	文字内容	-
value	`string`	否	-	标识 radio 名称, 用户确定当前组件是否被选中	-
checked	`boolean`	否	false	指定当前是否选中, 此模式下为控制型组件	-
default-checked	`boolean`	否	false	初始是否选中, 此模式下为非控制型组件	-
disabled	`boolean`	否	false	是否禁用	-
icon	`string`	否	-	自定义图标名称	-
color	`string`	否	-	自定义图标颜色	-
ext-style	`string`	否	-	根节点额外扩展样式	-

事件 Events

名称	参数列表	描述	备注
change	`(e: CustomEvent<string \| number>) => void`	单选框选中时发生的回调	当被 `ti-tadio-group` 包裹时，只有 `ti-tadio-group` 的 `change` 会被触发

CSS 变量 CSS Variables

变量	默认值	说明	备注
`--radio-button-height`	`56px`	-	-
`--radio-button-padding-v`	`0`	-	-
`--radio-button-padding-h`	`0`	-	-
`--radio-button-text-color`	`theme.color.gray.texticon.550`	按钮内部文字，颜色（未选中）	-
`--radio-button-disabled-text-color`	`theme.color.gray.texticon.250`	按钮内部文字，颜色（disable）	-
`--radio-button-disabled-border-color`	`theme.color.brand.300`	按钮描边色（disable）	-
`--radio-button-bg-color`	`theme.color.gray.background.20`	按钮背景色（未选中）	-
`--radio-button-padding`	`theme.spacing.horizontal.h3` `theme.spacing.vertical.v5`	按钮内部Padding	-
`--radio-button-radius`	`theme.borderRadius.r2`	按钮圆角	-
`--radio-button-checked-bg-color`	`theme.color.brand.100`	按钮背景色（选中）	-
`--radio-button-checked-border-color`	`theme.color.brand.300`	按钮描边色（选中）	-
`--radio-button-checked-text-color`	`theme.color.brand.1000`	按钮内部文字，颜色（选中）	-
`--radio-button-font-size`	`theme.fontSize.t5`	按钮内部文字，字号	-
`--radio-button-font-weight`	`theme.fontWeight.regular`	按钮内部文字，字重	-
`--radio-button-line-height`	`theme.lineHeight.multiline.t2`	按钮内部文字，行高	-

插槽 Slots

名称	说明	备注
prefix	自定义文字前面内容	-
suffix	自定义文字后面内容	-

ti-tadio-group API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
value	`string` \| `number`	否	-	用于设置当前选中的值	-
default-value	`string` \| `number`	否	-	默认选中的值	-
disabled	`boolean`	否	`false`	指定当前是否禁用	-
label-disabled	`boolean`	否	`false`	是否禁用文本点击效果	-
direction	`horizontal` \| `vertical`	否	`horizontal`	排列方向	-
shape	`circle` \| `square`	否	`circle`	图标形状，可选值为 circle、square	-
icon	`string`	否	-	自定义图标名称	-
options	`Array<Option>`	否	-	以配置形式设置子元素	-
size	`number`	否	-	自定义图标尺寸	-
color	`string`	否	-	自定义图标颜色	-
ext-style	`string`	否	-	根节点额外扩展样式	-

Options

interface Option {
  label: string;
  value: string;
  disabled?: boolean;
}

事件 Events

名称	参数列表	描述	备注
change	`(e: CustomEvent<string \| number>) => void`	单选框选中时发生的回调	-

可扩展样式名 External Class

类名	说明	备注
ext-class	扩展样式类名	-

单选框 Radio

ti-radio 基本使用​

默认选中状态​

禁用点击效果​

修改单选框的圆角度数​

组件图标设置​

监听单选框选中状态变化​

TiRadioButton 示例​

基本使用​

默认选中状态​

组件内容设置​

改变单选按钮颜色​

监听单选按钮选中状态变化​

TiRadioGroup 示例​

基本使用​

禁用所有单选框点击效果​

设置单选框组合中的选中值​

使用 options 创建单选框​

监听单选组合中选中状态变化​

ti-radio API​

属性 Properties​

事件 Events​

插槽 Slots​

可扩展样式名 External Class​

CSS 变量 CSS Variables​

ti-tadio-button API​

属性 Properties​

事件 Events​

CSS 变量 CSS Variables​

插槽 Slots​

ti-tadio-group API​

属性 Properties​

Options​

事件 Events​

可扩展样式名 External Class​

ti-radio 基本使用

默认选中状态

禁用点击效果

修改单选框的圆角度数

组件图标设置

监听单选框选中状态变化

TiRadioButton 示例

基本使用

默认选中状态

组件内容设置

改变单选按钮颜色

监听单选按钮选中状态变化

TiRadioGroup 示例

基本使用

禁用所有单选框点击效果

设置单选框组合中的选中值

使用 options 创建单选框

监听单选组合中选中状态变化

ti-radio API

属性 Properties

事件 Events

插槽 Slots

可扩展样式名 External Class

CSS 变量 CSS Variables

ti-tadio-button API

属性 Properties

事件 Events

CSS 变量 CSS Variables

插槽 Slots

ti-tadio-group API

属性 Properties

Options

事件 Events

可扩展样式名 External Class