无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/meta.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubcss.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/menu.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/top.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/head.htm

[ lyuif-switch ] 开关

时间:2020-09-19 23:28来源:www.lyuid.com 作者:前沿视觉网 点击:
V1.1.1 [ lyuif-switch ] 开关 # 效果预览 Demo 参数说明 API 实用的开关组件,支持背景和圆点自定义配置,应付多种复杂常见UI切换 参数 说明 类型 默认值 ui 组件容器-外部class类 Strting / css 组件容器

V1.1.1 [ lyuif-switch ] 开关#

效果预览 Demo

参数说明 API
实用的开关组件,支持背景和圆点自定义配置,应付多种复杂常见UI切换
参数 说明 类型 默认值
ui 组件容器-外部class类 Strting /
css 组件容器-style样式 Strting /
size 大小-rpx (设置圆点大小后,背景大小自动适应) Number 44
on 选中状态 Boolean false
dis 是否为禁用状态 Boolean false
c 关闭状态-背景-颜色 Strting #fff
c-ui 关闭状态-背景-外部样式类 Strting /
ac 开启状态-背景-颜色 Strting #1989fa
ac-ui 开启状态-背景-外部样式类 Strting /
dot-ui 圆点-外部样式类 Strting /
dot-css 圆点-style样式 Strting /
dot-c 关闭状态-圆点背景-颜色 Strting #fff
dot-c-ui 关闭状态-圆点背景-外部样式类 Strting /
dot-ac 开启状态-圆点背景-颜色 Strting /
dot-ac-ui 开启状态-圆点背景-外部样式类 Strting /

Lyuif组件源码展示

  1. <lyuif-switch
  2.     on="{{true}}"
  3. />
  4.  
  5.  
  6. <lyuif-switch
  7.     on="{{false}}"
  8.     dis="{{true}}"
  9. />
  10.  
  11.  
  12. <lyuif-switch
  13.     on="{{true}}"
  14.     dis="{{true}}"
  15. />
  16.  
  17.  
  18. <lyuif-switch
  19.     on="{{true}}"
  20.     c-ui="class1"
  21.     ac-ui="class2"
  22.  
  23.  
  24. />
  25. <lyuif-switch
  26.     on="{{true}}"
  27.     ac="red"
  28. />
  29.  
  30.  
  31. <lyuif-switch
  32.     on="{{true}}"
  33.     c="red"
  34. />
  35.  
  36.  
  37. <lyuif-switch
  38.     on="{{true}}"
  39.     c="red"
  40.     ac="green"
  41. />
  42.  
  43.  
  44. <lyuif-switch
  45.     on="{{true}}"
  46.     dot-c="red"
  47. />
  48.  
  49.  
  50. <lyuif-switch
  51.     on="{{true}}"
  52.     dot-ac="red"
  53. />
  54.  
  55.  
  56. <lyuif-switch
  57.     on="{{true}}"
  58.     dot-c="red"
  59.     dot-ac="green"
  60. />
  61.  
  62.  
  63. <lyuif-switch
  64.     on="{{true}}"
  65.     dot-c-ui="class1"
  66.     dot-ac-ui="class2"
  67. />
  68.  
事件 Events
 
参数 说明 类型 默认值
bind:change 开关状态切换回调 eventhandle e.detail: 是否选中开关
bind:tap 异步触发 eventhandle /

Lyuif组件源码展示

  1. <lyuif-switch
  2.     on="{{true}}"
  3.     bind:change="change"
  4.  
  5. />
  6.  
  7. <lyuif-switch
  8.     on="{{on_async}}"
  9.     async="{{true}}"
  10.     bind:tap="bind_async"
  11.  
  12. />
  13.  
  14.  
  15. ({Page
  16.     data:{
  17.     on:false,
  18.     on_async:false
  19.     },
  20.     change(e){
  21.     console.log(e.detail)
  22.     this.setData({on:e.detail})
  23.     },
  24.     bind_async(e){
  25.     this.setData({on_async:!this.data.on_async})
  26.     },
  27. })
  28.  
前端UI框架,UI框架组件,小程序组件,Lyuif前端框架专注于高效UI解决方案.lyuif是一款HTML/CSS前端框架,高效组件搭配lyui基因碎片化组合完美适配设计稿以及迭代更新,高效前端开发解决方案
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footer.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/side.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footbar.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubjs.htm