Switch 开关

概述

Switch 开关选择器，原生组件增强。

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "开关",
  "usingComponents": {
    "fui-switch":"/components/firstui/fui-switch/fui-switch"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-switch":"components/firstui/fui-switch/fui-switch"
  }

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 change 事件获取打开关闭状态。

<fui-switch bindchange="change"></fui-switch>

默认打开

通过 checked 属性设置是否默认打开。

<fui-switch checked></fui-switch>

改变大小、颜色

通过 scaleRatio 属性来缩放组件大小，color 属性修改打开后颜色。

<fui-switch scaleRatio="{{0.8}}" color="#FFB703"></fui-switch>

Slots

插槽名称	说明
default V2.3.0+	开关按钮内显示内容，仅switch模式下有效

Props

属性名	类型	说明	默认值	其他说明
name	String	开关选择器名称	-	-
checked	Boolean	是否打开	false	-
disabled	Boolean	是否禁用	false	-
type	String	开关显示样式，有效值：switch, checkbox	switch	-
color	String	开关打开时颜色	-	若值为空，可以通过css变量（--fui-color-primary）修改默认颜色值
background V2.4.0+	String	开关关闭时颜色	#fdfdfd	-
btnColor V2.3.0+	String	开关打开时时圆形按钮颜色,type=switch 有效	#fff	-
btnBgColor V2.4.0+	String	开关关闭时时圆形按钮颜色,type=switch 有效	#fff	-
borderColor	String	边框颜色，type=checkbox时生效	#ccc	-
checkMarkColor	String	对号颜色，type=checkbox时生效	#fff	-
scaleRatio	Number, String	缩放比例	1	-

Events

事件名	说明	回调参数
bind:change	开关切换状态时触发	event.detail={   value:是否checked }

示例预览