官网地址： https://www.runoob.com/try/try.php?filename=ionic_toggle

<html ng-app="ionicApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>ionic Toggle（开关控件）</title>
        <link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    </head>
    <body>
    
    <div class="bar bar-header">
      <div class="h1 title">切换</div>
    </div>

    <div class="content has-header">

      <ul class="list">
        <li class="item item-toggle">
           HTML5
           <label class="toggle toggle-positive">
             <input type="checkbox" checked="">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           CSS3
           <label class="toggle toggle-calm">
             <input type="checkbox" checked="">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           Flashplayer
           <label class="toggle toggle-balanced">
             <input type="checkbox">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           Java Applets
           <label class="toggle toggle-energized">
             <input type="checkbox">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           
           <label class="toggle toggle-assertive">
             <input type="checkbox" checked="">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           Silverlight
           <label class="toggle toggle-royal">
             <input type="checkbox">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           Web Components
           <label class="toggle toggle-dark">
             <input type="checkbox" checked="">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
      </ul>

    </div>
  </body>
</html>

 效果图：

  改造后的单个开关控件的快速使用：

<html ng-app="ionicApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    </head>
<body>
	<!--toggle表示该组件是一个开关，toggle-balanced表示颜色设置-->
	<label class="toggle toggle-balanced">
		<!--input复选框在界面中是被隐藏的,checked属性决定是否被选中-->
		<input type="checkbox" checked="">
		<div class="track">
			<div class="handle"></div>
		</div>
	</label>
  </body>
</html>

上述这个样式虽然很好，但是在与BootStrap一起结合使用时会产生冲突会导致JS事件不被触发，因此个人的建议做法是根据上述样式与事件功能自己写纯原生的CSS样式和JS事件

 

Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

基于第三方库的Flutter OpenHarmony 资讯聚合器

这是一个基于Flutter和 WebView 的资讯聚合器应用，支持 OpenHarmony 平台。用户可以浏览多个 RSS 源的新闻文章，支持书签、历史记录、阅读模式等功能。

avatar 开源鸿蒙跨平台开发者社区
cover

任务77：Flutter 鸿蒙应用视频录制功能实战：视频录制+录制控制+视频编辑，打造完整视频处理能力

avatar 开源鸿蒙跨平台开发者社区

Flutter for OpenHarmony 天气应用实战DAY3：空气质量展示+昼夜主题切换

本文介绍了Flutter鸿蒙天气APP实战系列第三天的开发内容，重点实现空气质量展示和昼夜主题切换功能。通过封装全局网络拦截器优化请求处理，新增AQI、PM2.5等空气质量数据展示，并采用时间检测自动切换浅色/深色主题。文章详细讲解了代码分层架构设计、状态管理实现以及鸿蒙系统适配要点，最终实现了包含空气质量模块、智能主题切换的天气应用，为后续城市搜索、天气预警等功能打下基础。该项目保持轻量化设计，

avatar 开源鸿蒙跨平台开发者社区