开关 Switch

开关选择器

使用

API

安装使用

import { TiSwitch } from '@titian-design/mobile-react'

用法示例

基础用法

codesanbox

copy

code

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

export default function App() {
  return <TiSwitch />;
}

尺寸大小

codesanbox

copy

code

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

export default function App() {
  return (
    <div className="code-container" style={{ flexDirection: 'row' }}>
      <TiSwitch />
      <TiSwitch size={60} />
      <TiSwitch size={80} />
    </div>
  );
}

颜色

codesanbox

copy

code

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

export default function App() {
  return <TiSwitch activeColor="blue" color="#000" />;
}

默认值

codesanbox

copy

code

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

export default function App() {
  return (
    <div className="code-container" style={{ flexDirection: 'row' }}>
      <TiSwitch defaultValue />
      <TiSwitch value />
    </div>
  );
}

禁用

codesanbox

copy

code

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

export default function App() {
  return (
    <div className="code-container" style={{ flexDirection: 'row' }}>
      <TiSwitch value={false} disabled />
      <TiSwitch defaultValue disabled />
    </div>
  );
}

加载中

codesanbox

copy

code

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

export default function App() {
  return <TiSwitch loading />;
}

TiSwitch API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
value	boolean	否	-	展示
defaultValue	boolean	否	true	提示类型	-
size	number	否	theme.fontSize.t1	大小	-
disabled	boolean	否	false	点击禁用	-
activeColor	string	否	theme.color.brand.1000	选中颜色	-
color	string	否	color.gray.texticon.250	未选颜色	-
loading	boolean	否	false	加载中	-
extStyle	string	否	-	容器样式	-

事件 Events

名称	参数列表	描述	备注
onChange	(e: CustomEvent<boolean>) => void	当前状态:打开/关闭	-

外部样式类 External Classes

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

CSS 变量 CSS Variable

变量	默认值	说明	备注
--switch-bg-color	theme.color.gray.texticon.250	组件未选中状态下背景色	-
--switch-active-bg-color	theme.color.brand.1000	组件选中状态下背景色，默认跟随主题色	-
--switch-ball-bg-color	theme.color.gray.texticon.invert	球背景色	-
--switch-loading-color	theme.color.brand.1000	加载图标颜色，默认跟随主题色	-