单选框 Radio

单选框。

使用

API

安装使用

import { TiRadio, TiRadioGroup, TiRadioButton } from '@titian-design/mobile-react';

TiRadio 基本使用

基本使用

文字内容

组件附带文字内容

codesanbox

copy

code

import React from 'react';
import { TiRadio } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiRadio />
      <TiRadio label="文字内容" />
      <TiRadio>文字内容</TiRadio>
    </>
  );
}

禁用多选框点击效果

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

codesanbox

copy

code

import React from 'react';
import { TiRadio } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiRadio disabled label="radio" />
      <TiRadio disabled defaultChecked label="radio" />
    </>
  );
}

图标尺寸

codesanbox

copy

code

import React from 'react';
import { TiRadio } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiRadio label="radio" />
      <TiRadio size={46} label="radio" />
      <TiRadio size={60} label="radio" />
    </>
  );
}

事件监听

未选中

codesanbox

copy

code

import React, { useState } from 'react';
import { TiRadio } from 'titian-h5-react';

export default function App() {
  const [selected, setSelected] = useState(false);
  return <TiRadio onChange={() => setSelected(prev => !prev)}>{selected ? '选中' : '未选中'}</TiRadio>;
}

默认选中状态

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

codesanbox

copy

code

import React from 'react';
import { TiRadio } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiRadio label="radio" />
      <TiRadio checked label="radio" />
      <TiRadio defaultChecked label="radio" />
    </>
  );
}

图标类型

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

codesanbox

copy

code

import React from 'react';
import { TiRadio } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiRadio label="radio" defaultChecked />
      <TiRadio icon="right-custom" label="radio" defaultChecked />
    </>
  );
}

修改多选框的圆角度数

多选框可自定义边框角度，支持方形（square）、圆形（circle）和自定义角度，默认为圆形。当自定义角度时，会自动根据屏幕分辨率调整数字大小！

codesanbox

copy

code

import React from 'react';
import { TiRadio } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiRadio defaultChecked label="radio" />
      <TiRadio shape="square" label="radio" />
      <TiRadio shape={8} label="radio" />
    </>
  );
}

TiRadioButton 示例

基本使用

radio

组件附带文字内容

codesanbox

copy

code

import React from 'react';
import { TiRadioButton } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiRadioButton label="radio" />
      <TiRadioButton>radio</TiRadioButton>
    </>
  );
}

组件内容设置

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

codesanbox

copy

code

import React from 'react';
import { TiRadioButton, TiImage } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiRadioButton label="设置右侧图标" icon="sort-inactive" />

      <TiRadioButton label="自定义左侧内容">
        <TiImage
          slot="prefix"
          width={40}
          radius={8}
          height={40}
          extStyle={{ marginRight: '4px' }}
          src="https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png"
        />
      </TiRadioButton>

      <TiRadioButton label="自定义右侧内容">
        <TiImage
          slot="suffix"
          width={40}
          radius={8}
          height={40}
          extStyle={{ marginLeft: '4px' }}
          src="https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png"
        />
      </TiRadioButton>
    </>
  );
}

事件监听

未选中

codesanbox

copy

code

import React, { useState } from 'react';
import { TiRadioButton } from 'titian-h5-react';

export default function App() {
  const [selected, setSelected] = useState(false);
  return <TiRadioButton onChange={() => setSelected(prev => !prev)}>{selected ? '选中' : '未选中'}</TiRadioButton>;
}

默认选中状态

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

codesanbox

copy

code

import React from 'react';
import { TiRadioButton } from 'titian-h5-react';

export default function App() {
  return (
    <>
      <TiRadioButton label="默认选中" checked />
      <TiRadioButton label="默认选中" defaultChecked />
    </>
  );
}

改变多选按钮颜色

多选按钮默认根据主题色变化

codesanbox

copy

code

import React from 'react';
import { TiRadioButton } from 'titian-h5-react';

export default function App() {
  const styles: any = {
    '--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%)',
  };

  return (
    <>
      <TiRadioButton label="通过属性更改颜色" color="#2a6ae9" />

      <div style={styles}>
        <TiRadioButton label="通过 css 变量更改颜色" />
      </div>
    </>
  );
}

TiRadioGroup 示例

基本使用

codesanbox

copy

code

import React from 'react';
import { TiRadioGroup, TiRadio, TiRadioButton } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiRadioGroup>
        <TiRadio label="radio" value="1" />
        <TiRadio label="radio" value="2" />
        <TiRadio label="radio" value="3" />
      </TiRadioGroup>

      <TiRadioGroup>
        <TiRadioButton label="radio" value="1" />
        <TiRadioButton label="radio" value="2" />
        <TiRadioButton label="radio" value="3" />
      </TiRadioGroup>
    </div>
  );
}

设置选中值

codesanbox

copy

code

import React from 'react';
import { TiRadioGroup, TiRadio, TiRadioButton } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiRadioGroup value="1">
        <TiRadio label="受控模式-1" value="1" />
        <TiRadio label="受控模式-2" value="2" />
        <TiRadio label="受控模式-3" value="3" />
      </TiRadioGroup>

      <TiRadioGroup defaultValue="1">
        <TiRadio label="非受控模式-1" value="1" />
        <TiRadio label="非受控模式-2" value="2" />
        <TiRadio label="非受控模式-3" value="3" />
      </TiRadioGroup>

      <TiRadioGroup value="1">
        <TiRadioButton label="受控模式-1" value="1" />
        <TiRadioButton label="受控模式-2" value="2" />
        <TiRadioButton label="受控模式-3" value="3" />
      </TiRadioGroup>

      <TiRadioGroup defaultValue="1">
        <TiRadioButton label="非受控模式-1" value="1" />
        <TiRadioButton label="非受控模式-2" value="2" />
        <TiRadioButton label="非受控模式-3" value="3" />
      </TiRadioGroup>
    </div>
  );
}

禁用

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

codesanbox

copy

code

import React from 'react';
import { TiRadioGroup, TiRadio, TiRadioButton } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container">
      <TiRadioGroup disabled defaultValue="1">
        <TiRadio label="radio" value="1" />
        <TiRadio label="radio" value="2" />
        <TiRadio label="radio" value="3" />
      </TiRadioGroup>

      <TiRadioGroup disabled defaultValue="1">
        <TiRadioButton label="radio" value="1" />
        <TiRadioButton label="radio" value="2" />
        <TiRadioButton label="radio" value="3" />
      </TiRadioGroup>
    </div>
  );
}

使用 options 创建多选框

此模式只支持 TiRadio

codesanbox

copy

code

import React from 'react';
import { TiRadioGroup } from 'titian-h5-react';

export default function App() {
  const options = [
    { value: 'a', label: '选项 A' },
    { value: 'b', label: '选项 B' },
    { value: 'c', label: '选项 C' },
  ];

  return (
    <div className="code-container">
      <TiRadioGroup options={options} />
    </div>
  );
}

事件监听

codesanbox

copy

code

import React, { useCallback } from 'react';
import { TiRadioGroup, TiRadio, TiRadioButton } from 'titian-h5-react';

export default function App() {
  const handleChange = useCallback((e: CustomEvent<string | number>) => {
    alert(`组件选中: ${e.detail}`);
  }, []);
  return (
    <div className="code-container">
      <TiRadioGroup onChange={handleChange}>
        <TiRadio label="radio" value="1" />
        <TiRadio label="radio" value="2" />
        <TiRadio label="radio" value="3" />
      </TiRadioGroup>

      <TiRadioGroup onChange={handleChange}>
        <TiRadioButton label="radio" value="1" />
        <TiRadioButton label="radio" value="2" />
        <TiRadioButton label="radio" value="3" />
      </TiRadioGroup>
    </div>
  );
}

TiRadio API

属性 Properties

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

事件 Events

名称	参数列表	描述	备注
onChange	(e: CustomEvent<boolean>) => void	单选框选中时触发的事件	当被 TiRadioGroup 包裹时，只有 TiRadioGroup 的 onChange 会被触发

插槽 Slots

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

可扩展样式名 External Class

名称	说明	备注
extClass	根节点可扩展的类名	-
iconClass	图标节点可扩展的类名	-

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文字，行高

TiRadioButton API

属性 Properties

名称	类型	必填	默认值	说明	备注
label	string	否	-	文字内容	-
value	string	否	-	标识 radio 名称, 用户确定当前组件是否被选中	-
checked	boolean	否	false	指定当前是否选中, 此模式下为控制型组件	-
defaultChecked	boolean	否	false	初始是否选中, 此模式下为非控制型组件	-
disabled	boolean	否	false	是否禁用	-
icon	string	否	-	自定义图标名称	-
color	string	否	-	自定义图标颜色	-
extStyle	string | Record<string, string>	否	-	根节点额外扩展样式	属性值如果是带单位的话，要带上单位，如：{margin: '10px'}

事件 Events

名称	参数列表	描述	备注
onChange	(e: CustomEvent<boolean>) => void	单选框选中时发生的回调	当被 TiRadioGroup 包裹时，只有 TiRadioGroup 的 onChange 会被触发

插槽 Slots

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

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	按钮内部文字，行高

TiRadioGroup API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
value	<code>string | number </code>	否	-	用于设置当前选中的值	-
defaultValue	<code>string | number </code>	否	-	默认选中的值	-
disabled	boolean	否	false	指定当前是否禁用	-
labelDisabled	boolean	否	false	是否禁用文本点击效果	-
direction	<code>horizontal | vertical </code>	否	horizontal	排列方向	-
shape	<code>circle | square </code>	否	circle	图标形状，可选值为 circle、square	-
icon	string	否	-	自定义图标名称	-
options	Array<Option>	否	-	以配置形式设置子元素	-
size	number	否	-	自定义图标尺寸	-
color	string	否	-	自定义图标颜色	-
extStyle	<code>string | Record<string, string></code>	否	-	根节点额外扩展样式	属性值如果是带单位的话，要带上单位，如：{margin: '10px'}

Options

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

事件 Events

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

可扩展样式名 External Class

类名	说明	备注
extClass	扩展样式类名	-