搜索文件 /
阴影

离子复选框

复选框允许从一组选项中选择多个选项。当激活时,它们出现在检查(勾选)。单击复选框将切换 检查 财产。也可以通过设置以编程方式检查它们 检查 财产。

用法


                <! - 默认复选框 - >
               
                  <
                 离子复选框
                 >
                  
                 离子复选框
                 >
               
                <! - 禁用复选框 - >
               
                  <
                 离子复选框
                
                 禁用
                  =
                  
                 真的
                  
                 >
                  
                 离子复选框
                 >
               
                <! - 选中复选框 - >
               
                  <
                 离子复选框
                
                 检查
                  =
                  
                 真的
                  
                 >
                  
                 离子复选框
                 >
               
                <! - 复选框颜色 - >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 基本的
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 中学
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 危险
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 黑暗的
                  
                 >
                  
                 离子复选框
                 >
               
                <! - 列表中的复选框 - >
               
                  <
                 离子清单
                 >
               
                  <
                 离子项目
                
                 * Ngfor.
                  =
                  
                 让表格输入
                  
                 >
               
                  <
                 离子标签
                 >
               {{条目.Val}}
                  
                 离子标签
                 >
               
                  <
                 离子复选框
                
                 投币口
                  =
                  
                 结尾
                  
                
                 [(ngmodel)]
                  =
                  
                 entry.ischecked.
                  
                 >
                  
                 离子复选框
                 >
               
                  
                 离子项目
                 >
               
                  
                 离子清单
                 >
复制 复制

                进口
               
                {
               零件
                }
               
                
               
                '@ Angular / Core'
                ;
               @
                零件
                
                {
               选择器
                
               
                'app-page-home'
                
               templateURL.
                
               
                'home.page.html'
                
               样式堡垒
                
               
                [
                'home.page.scss'
                ]
               
                }
                的)
               
                出口
               
                班级
               
                主页
               
                {
               
                民众
               形式
                =
               
                [
               
                {
               
                
               
                'Pepperoni'
                
               克服了
                
               
                真的
               
                }
                
               
                {
               
                
               
                '香肠'
                
               克服了
                
               
                错误的
               
                }
                
               
                {
               
                
               
                '蘑菇'
                
               克服了
                
               
                错误的
               
                }
               
                ]
                ;
               
                }
复制 复制

                <! - 默认复选框 - >
               
                  <
                 离子复选框
                 >
                  
                 离子复选框
                 >
               
                <! - 禁用复选框 - >
               
                  <
                 离子复选框
                
                 禁用
                 >
                  
                 离子复选框
                 >
               
                <! - 选中复选框 - >
               
                  <
                 离子复选框
                
                 检查
                 >
                  
                 离子复选框
                 >
               
                <! - 复选框颜色 - >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 基本的
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 中学
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 危险
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 黑暗的
                  
                 >
                  
                 离子复选框
                 >
               
                <! - 列表中的复选框 - >
               
                  <
                 离子清单
                 >
               
                  <
                 离子项目
                 >
               
                  <
                 离子标签
                 >
               意大利辣香肠
                  
                 离子标签
                 >
               
                  <
                 离子复选框
                
                 投币口
                  =
                  
                 结尾
                  
                
                 价值
                  =
                  
                 意大利辣香肠
                  
                
                 检查
                 >
                  
                 离子复选框
                 >
               
                  
                 离子项目
                 >
               
                  <
                 离子项目
                 >
               
                  <
                 离子标签
                 >
               香肠
                  
                 离子标签
                 >
               
                  <
                 离子复选框
                
                 投币口
                  =
                  
                 结尾
                  
                
                 价值
                  =
                  
                 香肠
                  
                
                 禁用
                 >
                  
                 离子复选框
                 >
               
                  
                 离子项目
                 >
               
                  <
                 离子项目
                 >
               
                  <
                 离子标签
                 >
               蘑菇
                  
                 离子标签
                 >
               
                  <
                 离子复选框
                
                 投币口
                  =
                  
                 结尾
                  
                
                 价值
                  =
                  
                 蘑菇
                  
                 >
                  
                 离子复选框
                 >
               
                  
                 离子项目
                 >
               
                  
                 离子清单
                 >
复制 复制

                进口
               反应
                
               
                {
               useestate.
                }
               
                
               
                '反应'
                ;
               
                进口
               
                {
               离子联系
                
               离子主艇
                
               离子页面
                
               iontitle.
                
               Iontoolbar.
                
               IonCheckbox.
                
               离子列表
                
               IoniTem.
                
               Ionlabel.
                
               Ionitemdivider
                }
               
                
               
                '@betway东盟体育app离子/反应'
                ;
               
                Const.
               复选列表
                =
               
                [
               
                {
               
                
               
                'Pepperoni'
                
               克服了
                
               
                真的
               
                }
                
               
                {
               
                
               
                '香肠'
                
               克服了
                
               
                错误的
               
                }
                
               
                {
               
                
               
                '蘑菇'
                
               克服了
                
               
                错误的
               
                }
               
                ]
                ;
               
                出口
               
                Const.
               复选框申请
                
               反应
                
                FC.
               
                =
               
                
                的)
               
                =>
               
                {
               
                Const.
               
                [
               检查
                
               setchecked.
                ]
               
                =
               
                useestate.
                
                错误的
                的)
                ;
               
                返回
               
                
               
                  <
                  离子页面
                 >
                
                  <
                  离子主艇
                 >
                
                  <
                  Iontoolbar.
                 >
                
                  <
                  iontitle.
                 >
                复选框申请
                  
                  iontitle.
                 >
                
                  
                  Iontoolbar.
                 >
                
                  
                  离子主艇
                 >
                
                  <
                  离子联系
                 >
                
                  <
                  离子列表
                 >
                
                  <
                  Ionitemdivider
                 >
                默认复选框
                  
                  Ionitemdivider
                 >
                
                  <
                  IoniTem.
                 >
                
                  <
                  Ionlabel.
                 >
                检查:
                {
                杰森
                
                stryify.
                
               检查
                的)
                }
                  
                  Ionlabel.
                 >
                
                  <
                  IonCheckbox.
                
                 检查
                  =
                  {
                 检查
                  }
                
                 onionchange.
                  =
                  {
                  E.
                 
                  =>
                 
                  setchecked.
                  
                 E.
                  
                 细节
                  
                 检查
                  的)
                  }
                
                 />
                
                  
                  IoniTem.
                 >
                
                  <
                  Ionitemdivider
                 >
                已禁用复选框
                  
                  Ionitemdivider
                 >
                
                  <
                  IoniTem.
                 >
                  <
                  IonCheckbox.
                
                 投币口
                  =
                  
                 结尾
                  
                
                 禁用
                  =
                  {
                  真的
                  }
                
                 />
                  
                  IoniTem.
                 >
                
                  <
                  Ionitemdivider
                 >
                复选框颜色
                  
                  Ionitemdivider
                 >
                
                  <
                  IoniTem.
                 >
                
                  <
                  IonCheckbox.
                
                 投币口
                  =
                  
                 结尾
                  
                
                 颜色
                  =
                  
                 基本的
                  
                
                 />
                
                  <
                  IonCheckbox.
                
                 投币口
                  =
                  
                 结尾
                  
                
                 颜色
                  =
                  
                 中学
                  
                
                 />
                
                  <
                  IonCheckbox.
                
                 投币口
                  =
                  
                 结尾
                  
                
                 颜色
                  =
                  
                 危险
                  
                
                 />
                
                  <
                  IonCheckbox.
                
                 投币口
                  =
                  
                 结尾
                  
                
                 颜色
                  =
                  
                 
                  
                
                 />
                
                  <
                  IonCheckbox.
                
                 投币口
                  =
                  
                 结尾
                  
                
                 颜色
                  =
                  
                 黑暗的
                  
                
                 />
                
                  
                  IoniTem.
                 >
                
                  <
                  Ionitemdivider
                 >
                清单中的复选框
                  
                  Ionitemdivider
                 >
                
                {
               复选列表
                
                地图
                
                
                 {
                
                 
                克服了
                 }
                 
                一世
                的)
               
                =>
               
                
               
                  <
                  IoniTem.
                
                 钥匙
                  =
                  {
                 一世
                  }
                 >
                
                  <
                  Ionlabel.
                 >
                {
               
                }
                  
                  Ionlabel.
                 >
                
                  <
                  IonCheckbox.
                
                 投币口
                  =
                  
                 结尾
                  
                
                 价值
                  =
                  {
                 
                  }
                
                 检查
                  =
                  {
                 克服了
                  }
                
                 />
                
                  
                  IoniTem.
                 >
               
                的)
                的)
                }
                
                  
                  离子列表
                 >
                
                  
                  离子联系
                 >
                
                  
                  离子页面
                 >
               
                的)
                ;
               
                }
                ;
复制 复制

                进口
               
                {
               零件
                
               H
                }
               
                
               
                '@模板/核心'
                ;
               @
                零件
                
                {
               标签
                
               
                '复选框 - 例'
                
               styleurl.
                
               
                'checkbox-example.css'
               
                }
                的)
               
                出口
               
                班级
               
                checkboxExample.
               
                {
               
                私人的
               形式
                =
               
                [
               
                {
               
                
               
                'Pepperoni'
                
               克服了
                
               
                真的
               
                }
                
               
                {
               
                
               
                '香肠'
                
               克服了
                
               
                错误的
               
                }
                
               
                {
               
                
               
                '蘑菇'
                
               克服了
                
               
                错误的
               
                }
               
                ]
                ;
               
                使成为
                
                的)
               
                {
               
                返回
               
                [
               
                //默认复选框
               
                  <
                 离子复选框
                 >
                  
                 离子复选框
                 >
                
               
                //禁用复选框
               
                  <
                 离子复选框
                
                 禁用
                  =
                  {
                  真的
                  }
                 >
                  
                 离子复选框
                 >
                
               
                //选中复选框
               
                  <
                 离子复选框
                
                 检查
                  =
                  {
                  真的
                  }
                 >
                  
                 离子复选框
                 >
                
               
                //复选框颜色
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 基本的
                  
                 >
                  
                 离子复选框
                 >
                
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 中学
                  
                 >
                  
                 离子复选框
                 >
                
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 危险
                  
                 >
                  
                 离子复选框
                 >
                
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 
                  
                 >
                  
                 离子复选框
                 >
                
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 黑暗的
                  
                 >
                  
                 离子复选框
                 >
                
               
                //列表中的复选框
               
                  <
                 离子清单
                 >
                
                {
                
                
               形式
                
                地图
                
                入口
               
                =>
               
                  <
                 离子项目
                 >
                
                  <
                 离子标签
                 >
                {
               入口
                
               
                }
                  
                 离子标签
                 >
                
                  <
                 离子复选框
                
                 投币口
                  =
                  
                 结尾
                  
                
                 检查
                  =
                  {
                 入口
                  
                 克服了
                  }
                 >
                  
                 离子复选框
                 >
                
                  
                 离子项目
                 >
               
                的)
                }
                
                  
                 离子清单
                 >
               
                ]
                ;
               
                }
               
                }
复制 复制

                  <
                 模板
                 >
               
                <! - 默认复选框 - >
               
                  <
                 离子复选框
                 >
                  
                 离子复选框
                 >
               
                <! - 禁用复选框 - >
               
                  <
                 离子复选框
                
                 禁用
                  =
                  
                 真的
                  
                 >
                  
                 离子复选框
                 >
               
                <! - 选中复选框 - >
               
                  <
                 离子复选框
                
                 检查
                  =
                  
                 真的
                  
                 >
                  
                 离子复选框
                 >
               
                <! - 复选框颜色 - >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 基本的
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 中学
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 危险
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 
                  
                 >
                  
                 离子复选框
                 >
               
                  <
                 离子复选框
                
                 颜色
                  =
                  
                 黑暗的
                  
                 >
                  
                 离子复选框
                 >
               
                <! - 列表中的复选框 - >
               
                  <
                 离子清单
                 >
               
                  <
                 离子项目
                
                 v-for.
                  =
                  
                 进入形式
                  
                 >
               
                  <
                 离子标签
                 >
               {{条目.Val}}
                  
                 离子标签
                 >
               
                  <
                 离子复选框
                
                 投币口
                  =
                  
                 结尾
                  
                
                  @更新:
                 ModelValue.
                  =
                  
                 entry.ischecked = $事件
                  
                
                 :ModelValue.
                  =
                  
                 entry.ischecked.
                  
                 >
               
                  
                 离子复选框
                 >
               
                  
                 离子项目
                 >
               
                  
                 离子清单
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  {
                 IonCheckbox.
                  
                 IoniTem.
                  
                 Ionlabel.
                  
                 离子列表
                  }
                 
                  
                 
                  '@betway东盟体育app ionic / vue'
                  ;
                 
                  进口
                 
                  {
                 绝缘组分
                  }
                 
                  
                 
                  'vue'
                  ;
                 
                  出口
                 
                  默认
                 
                  绝缘组分
                  
                  {
                 成分
                  
                 
                  {
                 IonCheckbox.
                  
                 IoniTem.
                  
                 Ionlabel.
                  
                 离子列表
                  }
                  
                 
                  设置
                  
                  的)
                 
                  {
                 
                  Const.
                 形式
                  =
                 
                  [
                 
                  {
                 
                  
                 
                  'Pepperoni'
                  
                 克服了
                  
                 
                  真的
                 
                  }
                  
                 
                  {
                 
                  
                 
                  '香肠'
                  
                 克服了
                  
                 
                  错误的
                 
                  }
                  
                 
                  {
                 
                  
                 
                  '蘑菇'
                  
                 克服了
                  
                 
                  错误的
                 
                  }
                 
                  ]
                  ;
                 
                  返回
                 
                  {
                 形式
                  }
                  ;
                 
                  }
                 
                  }
                  的)
                  ;
                 
                  
                 脚本
                 >
复制 复制

特性

检查

描述

如果真的,选中复选框。

属性 检查
类型 布尔
默认 错误的

颜色

描述

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

属性 颜色
类型 字符串|不明确的

禁用

描述

如果真的,用户无法与复选框交互。

属性 禁用
类型 布尔
默认 错误的

不定

描述

如果真的,复选框将视觉视为不确定。

属性 不定
类型 布尔
默认 错误的

模式

描述

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

属性 模式
类型 “ios”|“MD”

姓名

描述

控件的名称,它提交了表单数据。

属性 姓名
类型 细绳
默认 这个.PutidId.

价值

描述

复选框的值并不意味着如果它检查或不检查,请使用检查属性。

复选框的值类似于值的值<输入类型=“checkbox”>,它只使用Checkbox参与本地人<形式>

属性 价值
类型 细绳
默认 '在'

事件

姓名 描述
Ionblur. 当复选框失去焦点时发出。
IonChange. 当被检查的财产发生变化时发出。
离子啮合 当复选框有焦点时发出。

CSS阴影部件

姓名 描述
容器 复选框标记的容器。
标记 复选标记用于指示选中状态。

CSS自定义属性

姓名 描述
- 背景 复选框图标的背景
- 留守检查 检查盒图标的背景
- 边框颜色 复选框图标的边框颜色
- 拍摄色彩检查 检查后复选框图标的边框颜色
--bOrder-RADIUS. 复选框图标的边界半径
- 字样风格 复选框图标的边框样式
- 宽度 复选框图标的边框宽度
--Checkmark-Color. 选中时复选框复选标记的颜色
--Checkmark-Width. 复选框中的笔划宽度复选标记
- 尺寸 复选框图标的大小
- 过渡 复选框图标的转换
查看来源
Baidu