搜索文档 /
阴影

离子切换

内容

切换可以改变单个选项的状态。开关可以通过按或滑动来打开或关闭。也可以通过设置 检查 财产。

定制

定制的背景

可以使用CSS变量自定义拨动轨道和手柄的背景。检查切换时,还有用于设置背景的变量。


              离子切换
             
              
             
              ——背景
              
             #000.
              
             
              ——background-checked
              
             #7a49a5
              
             
              ——进行后台
              
             #7a49a5
              
             
              -  Handle-背景检查
              
             #000.
              
             
              
复制 复制

因为这些变量设置了 背景 属性,这是一个速记,它可以接受任何值 背景财产 接受。

一个更复杂的案例可能涉及将图像添加到手柄背景。


              离子切换
             
              
             
              -  Handle-背景检查
              
             # fff
               url
               
              /资产/ power-icon.png
               
             无重复中心/包含
              
             
              
复制 复制

更进一步说,我们可以用 ::之前 后:: 伪元素将文本放置在背景的顶部。


              离子切换::之前
             
              
             
              位置
              
             绝对
              
             
              
              
             16px.
              
             
              
              
             10 px
              
             
              内容
              
             
              “在”
              
             
              颜色
              
             白色的
              
             
              字体大小
              
             8像素
              
             
              z - index
              
             1
              
             
              
复制 复制

自定义宽度

调整切换的宽度 将导致更窄的轨道,手柄仍然保持默认宽度。如果需要,设置 ——handle-width 使手柄变窄。


              离子切换
             
              
             
              宽度
              
             40像素
              
             
              
复制 复制

调整切换的宽度 更大的 将导致一个更宽的轨道,与手柄保持默认宽度。如果需要,设置 ——handle-width 使手柄更宽。


              离子切换
             
              
             
              宽度
              
             100 px
              
             
              
复制 复制

定制高度

调整切换的高度 比默认值将导致句柄高度自动调整为轨道大小。在 ios 手柄比轨道短( 100% - 4 px ),在 医学博士 手柄比轨道高( 100%+ 6px ).


              离子切换
             
              
             
              高度
              
             15px.
              
             
              
复制 复制

注意:这并不影响手柄宽度,宽度应设置使用 ——handle-width

调整切换的高度 更大的 将保持手柄在中心的默认高度。这可以通过设置进行修改 ——handle-height 可以设置为任何数量,但不会超过 - handle-max-height


              离子切换
             
              
             
              高度
              
             60像素
              
             
              
复制 复制

注意:这并不影响手柄宽度,宽度应设置使用 ——handle-width

定制间距

间隔是指手柄和轨道之间的水平间隙。默认情况下,句柄有 2 px 它周围的间距 ios 只要 .在 医学博士 模式没有默认空格。

删除 水平的 间距,套 - handle-spacing. 0 px


              离子切换
             
              
             
              -  handle-spacing.
              
             0 px
              
             
              
复制 复制

由于手柄有固定的高度,为了消除顶部和底部的间距,将高度设置为100%。


              离子切换
             
              
             
              -  handle-spacing.
              
             0 px
              
             
              ——handle-height
              
             100%
              
             
              
复制 复制

定制边框半径

——handle-border-radius 可以用来改变 这个特性 在处理。


              离子切换
             
              
             
              ——handle-border-radius
              
             14px 4px 4px 14px
              
             
              
复制 复制

针对 这个特性 只有在检查切换时,目标 .Toggle检查


              ion-toggle.toggle-checked
             
              
             
              ——handle-border-radius
              
             4px 14px 14px 4px
              
             
              
复制 复制

定制盒阴影

——handle-box-shadow 可以用来改变 盒子影子 在处理。


              离子切换
             
              
             
              ——handle-box-shadow
              
             4px 0 2px 0红色
              
             
              
复制 复制

仅在检查切换时才会瞄准盒子阴影,目标 .Toggle检查


              ion-toggle.toggle-checked
             
              
             
              ——handle-box-shadow
              
             -4px 0 2px 0红色
              
             
              
复制 复制

请参阅 定制溢出 允许 盒子影子 溢出切换容器。

自定义溢出

环境 溢出 在toggle上,将由toggle句柄继承。缺省情况下,overflow值为 ios 只要。的 盒子影子 仍然会出现因 包含 CSS属性。放 包含 没有任何 为了溢出肘节容器。


              离子切换
             
              
             
              ——handle-box-shadow
              
             0 3px 12px.
              rgba
              
             255
              
             0
              
             0
              
             0.6
              
              
             0 3 px 1 px
              rgba
              
             50.
              
             70
              
             255
              
             0.6
              
              
             
              溢出
              
             可见的
              
             
              包含
              
             没有任何
              
             
              
复制 复制

使用


                <!——默认切换——>
               
                  <
                 离子切换
                 >
                  
                 离子切换
                 >
               
                <!——禁用切换——>
               
                  <
                 离子切换
                
                 禁用
                 >
                  
                 离子切换
                 >
               
                <!—选中切换—>
               
                  <
                 离子切换
                
                 检查
                 >
                  
                 离子切换
                 >
               
                <!——切换颜色——>
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 基本的
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 二次
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 危险
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 黑暗的
                  
                 >
                  
                 离子切换
                 >
               
                <! - 在列表中切换 - >
               
                  <
                 离子清单
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               意大利辣香肠
                  
                 ion-label
                 >
               
                  <
                 离子切换
                
                 [(ngmodel)]
                  
                  
                 意大利辣香肠
                  
                 >
                  
                 离子切换
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               香肠
                  
                 ion-label
                 >
               
                  <
                 离子切换
                
                 [(ngmodel)]
                  
                  
                 香肠
                  
                
                 禁用
                  
                  
                 真正的
                  
                 >
                  
                 离子切换
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               蘑菇
                  
                 ion-label
                 >
               
                  <
                 离子切换
                
                 [(ngmodel)]
                  
                  
                 蘑菇
                  
                 >
                  
                 离子切换
                 >
               
                  
                 ion-item
                 >
               
                  
                 离子清单
                 >
复制 复制

                <!——默认切换——>
               
                  <
                 离子切换
                 >
                  
                 离子切换
                 >
               
                <!——禁用切换——>
               
                  <
                 离子切换
                
                 禁用
                 >
                  
                 离子切换
                 >
               
                <!—选中切换—>
               
                  <
                 离子切换
                
                 检查
                 >
                  
                 离子切换
                 >
               
                <!——切换颜色——>
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 基本的
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 二次
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 危险
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 黑暗的
                  
                 >
                  
                 离子切换
                 >
               
                <! - 在列表中切换 - >
               
                  <
                 离子清单
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               意大利辣香肠
                  
                 ion-label
                 >
               
                  <
                 离子切换
                
                 
                  
                  
                 结束
                  
                
                 价值
                  
                  
                 意大利辣香肠
                  
                
                 检查
                 >
                  
                 离子切换
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               香肠
                  
                 ion-label
                 >
               
                  <
                 离子切换
                
                 
                  
                  
                 结束
                  
                
                 价值
                  
                  
                 香肠
                  
                
                 禁用
                 >
                  
                 离子切换
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               蘑菇
                  
                 ion-label
                 >
               
                  <
                 离子切换
                
                 
                  
                  
                 结束
                  
                
                 价值
                  
                  
                 蘑菇
                  
                 >
                  
                 离子切换
                 >
               
                  
                 ion-item
                 >
               
                  
                 离子清单
                 >
复制 复制

                进口
               反应
                
               
                
               useState
                
               
                
               
                “反应”
                
               
                进口
               
                
               IonContent
                
               IonHeader
                
               离子页面
                
               IonTitle
                
               Iontoolbar.
                
               离子
                
               IonList
                
               IonItem
                
               IonLabel
                
               Ionitemdivider
                
               
                
               
                '@betway东盟体育app离子/反应'
                
               
                出口
               
                Const.
               肘爆炸
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                =>
               
                
               
                Const.
               
                
               检查
                
               setChecked
                
               
                
               
                useState
                
                
                
                
               
                返回
               
                
               
                  <
                  离子页面
                 >
                
                  <
                  IonHeader
                 >
                
                  <
                  Iontoolbar.
                 >
                
                  <
                  IonTitle
                 >
                肘爆炸
                  
                  IonTitle
                 >
                
                  
                  Iontoolbar.
                 >
                
                  
                  IonHeader
                 >
                
                  <
                  IonContent
                 >
                
                  <
                  IonList
                 >
                
                  <
                  Ionitemdivider
                 >
                默认切换
                  
                  Ionitemdivider
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                检查:
                
                JSON
                
                stringify
                
               检查
                
                
                  
                  IonLabel
                 >
                
                  <
                  离子
                
                 检查
                  
                  
                 检查
                  
                
                 onionchange.
                  
                  
                  e
                 
                  =>
                 
                  setChecked
                  
                 e
                  
                 细节
                  
                 检查
                  
                  
                
                 />
                
                  
                  IonItem
                 >
                
                  <
                  Ionitemdivider
                 >
                禁用切换
                  
                  Ionitemdivider
                 >
                
                  <
                  IonItem
                 >
                  <
                  离子
                
                 禁用
                
                 />
                  
                  IonItem
                 >
                
                  <
                  Ionitemdivider
                 >
                检查切换
                  
                  Ionitemdivider
                 >
                
                  <
                  IonItem
                 >
                  <
                  离子
                
                 检查
                
                 />
                  
                  IonItem
                 >
                
                  <
                  Ionitemdivider
                 >
                切换颜色
                  
                  Ionitemdivider
                 >
                
                  <
                  IonItem
                 >
                  <
                  离子
                
                 颜色
                  
                  
                 基本的
                  
                
                 />
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                  <
                  离子
                
                 颜色
                  
                  
                 二次
                  
                
                 />
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                  <
                  离子
                
                 颜色
                  
                  
                 危险
                  
                
                 />
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                  <
                  离子
                
                 颜色
                  
                  
                 
                  
                
                 />
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                  <
                  离子
                
                 颜色
                  
                  
                 黑暗的
                  
                
                 />
                  
                  IonItem
                 >
                
                  <
                  Ionitemdivider
                 >
                在列表中切换
                  
                  Ionitemdivider
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                意大利辣香肠
                  
                  IonLabel
                 >
                
                  <
                  离子
                
                 价值
                  
                  
                 意大利辣香肠
                  
                
                 />
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                香肠
                  
                  IonLabel
                 >
                
                  <
                  离子
                
                 价值
                  
                  
                 香肠
                  
                
                 禁用
                  
                  
                  真正的
                  
                
                 />
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                蘑菇
                  
                  IonLabel
                 >
                
                  <
                  离子
                
                 价值
                  
                  
                 蘑菇
                  
                
                 />
                
                  
                  IonItem
                 >
                
                  
                  IonList
                 >
                
                  
                  IonContent
                 >
                
                  
                  离子页面
                 >
               
                
                
               
                
                
复制 复制

                进口
               
                
               组件
                
               状态
                
               h
                
               
                
               
                “@stencil /核心”
                
               
                组件
                
                
               标签
                
               
                “toggle-example”
                
               styleurl.
                
               
                “toggle-example.css”
               
                
                
               
                出口
               
                
               
                ToggleExample
               
                
               
                状态
                
                
               意大利辣香肠
                
               
                布尔
               
                
               
                
                
               
                状态
                
                
               香肠
                
               
                布尔
               
                
               
                真正的
                
               
                状态
                
                
               蘑菇
                
               
                布尔
               
                
               
                
                
               
                渲染
                
                
               
                
               
                返回
               
                
               
                //默认切换
               
                  <
                 离子切换
                 >
                  
                 离子切换
                 >
                
               
                //禁用切换
               
                  <
                 离子切换
                
                 禁用
                 >
                  
                 离子切换
                 >
                
               
                / /检查切换
               
                  <
                 离子切换
                
                 检查
                 >
                  
                 离子切换
                 >
                
               
                / /切换颜色
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 基本的
                  
                 >
                  
                 离子切换
                 >
                
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 二次
                  
                 >
                  
                 离子切换
                 >
                
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 危险
                  
                 >
                  
                 离子切换
                 >
                
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 
                  
                 >
                  
                 离子切换
                 >
                
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 黑暗的
                  
                 >
                  
                 离子切换
                 >
                
               
                //在列表中切换
               
                  <
                 离子清单
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                意大利辣香肠
                  
                 ion-label
                 >
                
                  <
                 离子切换
                
                 检查
                  
                  
                  这个
                  
                 意大利辣香肠
                  
                
                 onionchange.
                  
                  
                  
                  电动汽车
                  
                 
                  =>
                 
                  这个
                  
                 意大利辣香肠
                  
                 电动汽车
                  
                 细节
                  
                 检查
                  
                 >
                  
                 离子切换
                 >
                
                  
                 ion-item
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                香肠
                  
                 ion-label
                 >
                
                  <
                 离子切换
                
                 检查
                  
                  
                  这个
                  
                 香肠
                  
                
                 onionchange.
                  
                  
                  
                  电动汽车
                  
                 
                  =>
                 
                  这个
                  
                 香肠
                  
                 电动汽车
                  
                 细节
                  
                 检查
                  
                
                 禁用
                  
                  
                  真正的
                  
                 >
                  
                 离子切换
                 >
                
                  
                 ion-item
                 >
                
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                蘑菇
                  
                 ion-label
                 >
                
                  <
                 离子切换
                
                 检查
                  
                  
                  这个
                  
                 蘑菇
                  
                
                 onionchange.
                  
                  
                  
                  电动汽车
                  
                 
                  =>
                 
                  这个
                  
                 蘑菇
                  
                 电动汽车
                  
                 细节
                  
                 检查
                  
                 >
                  
                 离子切换
                 >
                
                  
                 ion-item
                 >
                
                  
                 离子清单
                 >
                
               
                  <
                 div
                 >
                意大利辣香肠:
                
                这个
                
               意大利辣香肠
                
               
                “真正的”
               
                
               
                “假”
                
                  <
                 br
                 />
                香肠:
                
                这个
                
               香肠
                
               
                “真正的”
               
                
               
                “假”
                
                  <
                 br
                 />
                蘑菇:
                
                这个
                
               蘑菇
                
               
                “真正的”
               
                
               
                “假”
                
                
                  
                 div
                 >
               
                
                
               
                
               
                
复制 复制

                  <
                 模板
                 >
               
                <!——默认切换——>
               
                  <
                 离子切换
                 >
                  
                 离子切换
                 >
               
                <!——禁用切换——>
               
                  <
                 离子切换
                
                 禁用
                 >
                  
                 离子切换
                 >
               
                <!—选中切换—>
               
                  <
                 离子切换
                
                 检查
                 >
                  
                 离子切换
                 >
               
                <!——切换颜色——>
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 基本的
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 二次
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 危险
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 
                  
                 >
                  
                 离子切换
                 >
               
                  <
                 离子切换
                
                 颜色
                  
                  
                 黑暗的
                  
                 >
                  
                 离子切换
                 >
               
                <! - 在列表中切换 - >
               
                  <
                 离子清单
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               意大利辣香肠
                  
                 ion-label
                 >
               
                  <
                 离子切换
                
                 @ionChange
                  
                  
                 toppings.value.push (event.target.value美元)
                  
                
                 价值
                  
                  
                 意大利辣香肠
                  
                
                 :检查
                  
                  
                 toppings.value.indexOf(“意大利辣香肠”)! = = 1
                  
                 >
               
                  
                 离子切换
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               香肠
                  
                 ion-label
                 >
               
                  <
                 离子切换
                
                 @ionChange
                  
                  
                 toppings.value.push (event.target.value美元)
                  
                
                 价值
                  
                  
                 香肠
                  
                
                 :检查
                  
                  
                 toppings.value.indexOf(“意大利辣香肠”)! = = 1
                  
                
                 禁用
                  
                  
                 真正的
                  
                 >
               
                  
                 离子切换
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               蘑菇
                  
                 ion-label
                 >
               
                  <
                 离子切换
                
                 @ionChange
                  
                  
                 toppings.value.push (event.target.value美元)
                  
                
                 价值
                  
                  
                 蘑菇
                  
                
                 :检查
                  
                  
                 toppings.value.indexOf(“意大利辣香肠”)! = = 1
                  
                 >
               
                  
                 离子切换
                 >
               
                  
                 ion-item
                 >
               
                  
                 离子清单
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 IonLabel
                  
                 IonList
                  
                 IonItem
                  
                 离子
                  
                 
                  
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  进口
                 
                  
                 defineComponent
                  
                 vue
                  
                 
                  
                 
                  “vue”
                  
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  
                 
                  
                 IonLabel
                  
                 IonList
                  
                 IonItem
                  
                 离子
                  
                  
                 
                  设置
                  
                  
                 
                  
                 
                  Const.
                 配料
                  
                 
                  裁判
                  
                  
                  
                  
                  
                 
                  返回
                 
                  
                 配料
                  
                  
                 
                  
                 
                  
                  
                  
                 
                  
                 脚本
                 >
复制 复制

特性

检查

描述

如果真正的,选择切换。

属性 检查
类型 布尔
默认的

颜色

描述

从应用程序的颜色调色板使用的颜色。默认选项是:“基本的”“二级”“第三”“成功”“警告”“危险”“光”“中等的”,“黑暗的”.有关颜色的更多信息,请参见 主题

属性 颜色
类型 字符串|未定义

禁用

描述

如果真正的,用户无法与切换交互。

属性 禁用
类型 布尔
默认的

模式

描述

该模式确定要使用的平台样式。

属性 模式
类型 “ios”|“医学博士”

姓名

描述

控件的名称,该控件与表单数据一起提交。

属性 姓名
类型 细绳
默认的 this.inputId

价值

描述

切换的值并不意味着它检查或不检查,请使用检查属性。

切换的值类似于a的值< input type = "复选框”>,它只在toggle参与本机时使用< >形式

属性 价值
类型 Null | string | undefined
默认的 “上”

事件

姓名 描述
Ionblur. 在切换失去焦点时发出。
ionChange 当value属性更改时触发。
离子啮合 当切换有焦点时触发。

CSS阴影部件

姓名 描述
处理 用于更改选中状态的切换手柄或旋钮。
追踪 切换的背景轨道。

CSS自定义属性

姓名 描述
——背景 切换的背景
——background-checked 选中时切换的背景
--bOrder-RADIUS. 切换轨道的边界半径
——进行后台 切换句柄的背景
- Handle-背景检查 检查时切换手柄的背景
——handle-border-radius 切换手柄的边框半径
——handle-box-shadow 切换手柄的框阴影
——handle-height 切换手柄的高度
- handle-max-height 切换手柄的最大高度
- handle-spacing. 切换手柄周围的水平间距
- Handle过渡 切换切换手柄
——handle-width 切换手柄的宽度
查看源代码
Baidu