# Switch 开关

概述

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

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "开关",
  "usingComponents": {
    "fui-switch":"/components/firstui/fui-switch/fui-switch"
  }
}
1
2
3
4
5
6
第二种:在根目录app.json文件中全局引入
"usingComponents": {
    "fui-switch":"components/firstui/fui-switch/fui-switch"
  }
1
2
3

# 代码演示

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

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

<fui-switch bindchange="change"></fui-switch>
1
默认打开

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

<fui-switch checked></fui-switch>
1
改变大小、颜色

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

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

# 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
}

示例预览

Last Updated: 5/30/2024, 10:36:22 AM