开关 Switch

开关选择器

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-switch": "@titian-design/weapp/switch/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-switch": "platform://titian-mp/ti-switch"
  }
}

用法示例

基础用法

copy

code

<ti-switch />

尺寸大小

copy

code

<ti-switch />
<ti-switch size="{{60}}" />
<ti-switch size="{{80}}" />

颜色

copy

code

<ti-switch activeColor="blue" color="#000" />

默认值

copy

code

<ti-switch defaultValue />
<ti-switch value />

禁用

copy

code

<ti-switch value="{{false}}" disabled />
<ti-switch defaultValue disabled />

加载中

copy

code

<ti-switch loading />

ti-switch API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
value	boolean	否	-	展示
default-value	boolean	否	true	提示类型	-
size	number	否	40	大小	-
disabled	boolean	否	false	点击禁用	-
active-color	string	否	-	选中颜色	-
color	string	否	-	未选颜色	-
loading	boolean	否	false	加载中	-
ext-style	string	否	-	容器样式	-

事件 Events

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

外部样式类 External Classes

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

CSS 变量 CSS Variable

变量	默认值	说明	备注
--switch-bg-color	#c4c4c4	组件未选中状态下背景色	-
--switch-active-bg-color	#fa2c19	组件选中状态下背景色，默认跟随主题色	-
--switch-ball-bg-color	#ffffff	球背景色	-
--switch-loading-color	#fa2c19	加载图标颜色，默认跟随主题色	-