keiwen/enhanced-check

该软件包最新版本（2.1）的许可证信息不可用。

增强复选框和单选按钮设计

维护者

详细信息

github.com/Keiwen/enhancedCheck

源代码

问题

安装: 13

依赖项: 0

建议者: 0

安全性: 0

星标: 1

关注者: 2

分支: 1

公开问题: 0

语言:JavaScript

类型:组件

2.1 2017-03-14 14:04 UTC

Unknown License c1cbbcf35372670718a593612841a804cad1fdad

This package is auto-updated.

Last update: 2024-09-26 05:52:47 UTC

README

需要 Bootstrap >= 3.0.0

关于 angular 禁用样式的已知问题

演示

组件

基本

增强复选框和单选按钮设计。只需将输入和标签（标签跟在输入后面）放在一个具有所需类的 div 中

  • enhancedCheck: 基础类
  • enhancedCheck-inline: 如果它们嵌套在非内联 div 中，则显示输入内联
  • enhancedCheck-[primary|success|danger|warning]: 将基本颜色更改为 [蓝色|绿色|红色|橙色]
  • enhancedCheck-combine: 复选框的交替设计，旨在分组值
  • enhancedCheck-animate: 选择/取消选择时颜色缓慢变化

切换

还提供切换/复选框。只需在输入上提供“enhancedCheck-toggle”类，并可以配置数据属性。切换需要 jQuery！

  • data-on: 选中切换的标签
  • data-off: 未选中切换的标签
  • data-onstyle: 选中标签的 Bootstrap 类（success/warning/danger/...）
  • data-offstyle: 未选中标签的 Bootstrap 类（success/warning/danger/...）
  • data-style: 切换边框样式（"方形"，"圆形"，空默认（中等））

如果您需要 angular 1 支持，请包含指令文件，并在您的应用中使用 'ui.enhancedCheck' 模块。显然在这种情况下需要 require angular。您可以在输入标签上添加 ngModel（必需）、ngDisabled 和 ngChange。

预览

请参阅 index.html 或以下示例 alt tag

示例

典型的 HTML 示例

<div class="enhancedCheck enhancedCheck-primary">
  <input type="checkbox" id="sampleCheckbox">
  <label for="sampleCheckbox">Checkbox</label>
</div>

或

<div class="enhancedCheck enhancedCheck-success">
  <input type="radio" name="rb" id="sampleRadio1">
  <label for="sampleRadio1">Radio one</label>
  <input type="radio" name="rb" id="sampleRadio2">
  <label for="sampleRadio2">Radio two</label>
</div>

使用 angular 的切换

<input type="checkbox" id="sampleCheckboxToggle" class="enhancedCheck-toggle"
       data-on="Enable" data-off="Disable" data-onstyle="success" data-offstyle="danger"
       data-style="rounded"
       ng-model="toggle" ng-change="toggleChange()" ng-disabled="toggleDisabled"/>