zui
Version:
一个基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用。
120 lines (102 loc) • 2.4 kB
Markdown
# 开关
## 普通示例
<example>
<div class="row">
<div class="col-sm-4">
<div style="border: 1px solid #ddd; padding: 10px">
<div class="switch">
<input type="checkbox">
<label>夜间模式</label>
</div>
</div>
</div>
</div>
</example>
```html
<div class="switch">
<input type="checkbox">
<label>夜间模式</label>
</div>
```
## 对齐
使用 `.text-left` 或 `.text-right` 来更改文字对齐方向。
<example>
<div class="row">
<div class="col-sm-4">
<div style="border: 1px solid #ddd; padding: 10px">
<div class="switch text-left">
<input type="checkbox">
<label>夜间模式</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div style="border: 1px solid #ddd; padding: 10px">
<div class="switch text-right">
<input type="checkbox">
<label>夜间模式</label>
</div>
</div>
</div>
</div>
</example>
```html
<div class="switch text-left">
<input type="checkbox">
<label>夜间模式</label>
</div>
```
```html
<div class="switch text-right">
<input type="checkbox">
<label>夜间模式</label>
</div>
```
## 内联样式
使用 `.switch-inline` 让 `.switch` 作为 `inline-block` 展示。
<example>
<div class="switch switch-inline hl-warning">
<input type="checkbox">
<label>夜间模式</label>
</div>
</example>
```html
<div class="switch switch-inline">
<input type="checkbox">
<label>夜间模式</label>
</div>
```
## 禁用
为 `.switch` 添加 `.disabled` 类,或者为 `<input>` 添加 `[disabled]` 属性。
<example>
<div class="row">
<div class="col-sm-4">
<div style="border: 1px solid #ddd; padding: 10px">
<div class="switch disabled">
<input type="checkbox" checked>
<label>夜间模式</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div style="border: 1px solid #ddd; padding: 10px">
<div class="switch">
<input type="checkbox" disabled>
<label>夜间模式</label>
</div>
</div>
</div>
</div>
</example>
```html
<div class="switch disabled">
<input type="checkbox" checked>
<label>夜间模式</label>
</div>
```
```html
<div class="switch">
<input type="checkbox" disabled>
<label>夜间模式</label>
</div>
```