Bootstrap 开关按钮

Bootstrap Toggle是一个jQuery插件/小部件,可将普通复选框转换为响应式切换按钮。

安装


CDN

<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

下载

GitHub Latest release

NPM

npm install bootstrap4-toggle

Yarn

yarn add bootstrap4-toggle

演示


尺寸

Bootstrap toggle有不同的尺寸。

自定义尺寸

Bootstrap toggle 可以通过data-widthdata-height 选项处理自定义大小.

颜色

Bootstrap Toggle实现所有标准的bootstrap 4按钮颜色。

轮廓色

Bootstrap Toggle实现所有标准的bootstrap 4按钮轮廓颜色。

深色主题色

Bootstrap Toggle颜色在深色背景上看起来很棒。

深色主题轮廓色

Bootstrap Toggle轮廓色在深色背景上看起来很棒。

自订样式

设置按钮样式以适合现有的UX。

自订文字

可以使用属性或选项轻松更改文本。

HTML,图标,图像

您可以轻松添加图标或图像,因为开/关文本均支持html。

多行文字

多行切换会调整其高度。

动画速度

使用的csstransition 属性可以轻松控制过渡速度.toggle-group。您也可以完全关闭动画。

堆叠的复选框

只需添加data-toggle="toggle" 即可将复选框转换为切换。

内联复选框

只需将 data-toggle="toggle" 转换复选框添加到切换中即可。

用法


用HTML初始化

只需添加data-toggle="toggle"即可将复选框转换为切换。

用JavaScript初始化

只需调用bootstrapToggle将复选框转换为切换的方法即可。有关其他颜色,请参见选项

API


选项

可以通过数据属性或JavaScript传递选项。对于数据属性,将选项名称附加到data-,如中所示data-on="Enabled".

名称 类型 默认 描述
on string | html "On" on切换标签的文本。
off string | html "Off" 关闭切换标签的文本。
onstyle string "primary" 开启切换的 样式。
值有:primary, secondary, success, danger, warning, info, light, dark
请参阅自举按键选项文档了解更多信息。
offstyle string "light" 关闭切换的 样式。
值有:primary, secondary, success, danger, warning, info, light, dark
请参阅自举按键选项文档了解更多信息。
size string null 切换的大小。如果设置为null,则按钮为默认/正常大小。
值为: lg, sm, xs
请参见Bootstrap Button Sizes文档。
style string null 将提供的值附加到切换的class属性。使用此选项将自定义样式应用于切换。
width integer null 设置切换的宽度。
如果设置为null,将计算宽度。
height integer null 设置切换的高度。
如果设置为null,将计算高度。

方法

方法可用于直接控制切换。

方法 描述 演示
initialize $('#toggle-demo').bootstrapToggle() 使用选项初始化切换插件
destroy $('#toggle-demo').bootstrapToggle('destroy') 销毁拨动开关
on $('#toggle-demo').bootstrapToggle('on') 将切换开关设置为“on”状态
off $('#toggle-demo').bootstrapToggle('off') 将切换开关设置为“off”状态
toggle $('#toggle-demo').bootstrapToggle('toggle') 切换切换状态
enable $('#toggle-demo').bootstrapToggle('enable') 启用切换
disable $('#toggle-demo').bootstrapToggle('disable') 禁用切换

检查状态

您可以使用`checked`属性来确定切换的选中状态。

将element属性用于检查状态
document.getElementById('toggle-state').checked
返回true / false

事记


事件传播

Notes
• 所有事件都在输入元素和切换之间传播。
• <input type="checkbox">切换保持与输入同步时,直接在上监听事件。

停止事件传播

true 如果要更新控件的开/关状态,但又不想触发onChange事件,则 传递给on / off方法将启用silent选项,以防止控件传播更改事件。

API与输入

这也意味着使用API​​或Input触发事件将同时起作用。