开关

切换布局

布局相当简单：

<!-- Toggle element -->
<label class="toggle">
  <!-- Toggle input -->
  <input type="checkbox" />
  <!-- Toggle icon -->
  <span class="toggle-icon"></span>
</label>

在简单列表内：

<div class="list simple-list">
  <ul>
    ...
    <li>
      <span>Text label</span>
      <label class="toggle">
        <input type="checkbox" />
        <span class="toggle-icon"></span>
      </label>
    </li>
  </ul>
</div>

在常规列表内（更推荐）item-after）访问：

<div class="list">
  <ul>
    ...
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Text label</div>
        <div class="item-after">
          <label class="toggle">
            <input type="checkbox" />
            <span class="toggle-icon"></span>
          </label>
        </div>
      </div>
    </li>
  </ul>
</div>

切换颜色

切换支持所有默认颜色之一. 所以要改变它的颜色，只需向切换元素添加 color-[color] 类。

<!-- red toggle -->
<label class="toggle color-red">...</label>

<!-- orange toggle -->
<label class="toggle color-orange">...</label>

切换应用方法

让我们看看与切换相关的工作方法：

app.toggle.create(参数)- 创建切换实例

  • 参数 - 对象. 带有切换参数的对象

方法返回创建的切换实例

app.toggle.destroy(el)- 销毁切换实例

  • el - HTMLElement或字符串(使用 CSS 选择器) 或对象. 要销毁的切换元素或切换实例。

app.toggle.get(el)- 通过 HTML 元素获取切换实例

  • el - HTMLElement或字符串(使用 CSS 选择器)。切换元素。

方法返回切换实例

切换参数

现在让我们看看需要创建切换的可用参数列表：

参数类型默认描述
elHTMLElement
字符串		切换元素。HTMLElement 或切换元素的 CSS 选择器字符串
on对象

带有事件处理程序的对象。例如：

var toggle = app.toggle.create({
  el: '.toggle',
  on: {
    change: function () {
      console.log('Toggle changed')
    }
  }
})

切换方法 & 属性

所以要创建切换，我们必须调用：

var toggle = app.toggle.create({ /* parameters */ })

之后我们就有其初始化的实例（如toggle示例中上面的变量）以及有用的方法和属性：

属性
toggle.app链接到全局应用实例
toggle.el切换 HTML 元素
toggle.$el带有切换 HTML 元素的 Dom7 实例
toggle.inputEl切换输入 HTML 元素
toggle.$inputEl带有切换输入 HTML 元素的 Dom7 实例
toggle.checked布尔属性指示输入是否被选中
toggle.params切换参数
方法
toggle.toggle()切换输入状态
toggle.on(事件上触发, 处理程序)添加事件处理程序
toggle.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
toggle.off(事件上触发, 处理程序)移除事件处理程序
toggle.off(事件上触发)移除指定事件的所有处理程序
toggle.emit(事件上触发, ...args)在实例上触发事件

切换事件

切换将在切换元素上触发以下 DOM 事件，并在应用和切换实例上触发事件：

DOM 事件

事件Target描述
toggle:change切换元素<div class="toggle">当切换状态发生变化时将触发事件
toggle:beforedestroy切换元素<div class="toggle">在切换实例将被销毁之前将触发事件

应用和切换实例事件

切换实例在自身实例和应用实例上都会触发事件。应用实例事件名称前缀为toggle.

事件参数Target描述
changetoggletoggle当切换状态发生变化时将触发事件。作为参数的事件处理程序接收切换实例
toggleChangetoggleapp
beforeDestroytoggletoggle在切换实例将被销毁之前将触发事件。作为参数的事件处理程序接收切换实例
toggleBeforeDestroytoggleapp

切换自动初始化

如果你不需要使用切换 API，并且你的切换在页面内，并且在页面初始化时呈现在 DOM 中，那么它可以通过仅添加额外的toggle-init class:

<!-- Add toggle-init class -->
<label class="toggle toggle-init">
  <input type="checkbox" />
  <span class="toggle-icon"></span>
</label>

在这种情况下，如果你需要访问创建的切换实例，你可以使用app.toggle.get app method:

var toggle = app.toggle.get('.toggle');

if (toggle.checked) {
  // do something
}

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

注意，注释掉的变量默认未指定，其值在这种情况下是它们回退到的值。

.ios {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
  /*
  --f7-toggle-active-bg-color: var(--f7-theme-color);
  */
  --f7-toggle-inactive-knob-bg-color: #fff;
  --f7-toggle-active-knob-bg-color: #fff;
  --f7-toggle-inactive-border-color: #e5e5e5;
  --f7-toggle-inactive-bg-color: #fff;
}
.ios .dark,
.ios.dark {
  --f7-toggle-inactive-border-color: #555;
  --f7-toggle-inactive-bg-color: #555;
}
.md {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-toggle-inactive-bg-color: var(--f7-md-surface-variant);
  --f7-toggle-active-bg-color: var(--f7-theme-color);
  --f7-toggle-inactive-knob-bg-color: var(--f7-md-outline);
  --f7-toggle-active-knob-bg-color: var(--f7-md-on-primary);
  --f7-toggle-inactive-border-color: var(--f7-md-outline);
  --f7-toggle-active-border-color: var(--f7-theme-color);
}

示例

toggle.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Toggle</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Super Heroes</div>
    <div class="list list-strong list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Batman</div>
              <div class="item-after">
                <div class="toggle toggle-init">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Aquaman</div>
              <div class="item-after">
                <div class="toggle toggle-init color-blue">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Superman</div>
              <div class="item-after">
                <div class="toggle toggle-init color-red">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Hulk</div>
              <div class="item-after">
                <div class="toggle toggle-init color-green">
                  <input type="checkbox">
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Spiderman</div>
              <div class="item-after">
                <div class="toggle toggle-init disabled">
                  <input type="checkbox">
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Ironman</div>
              <div class="item-after">
                <div class="toggle toggle-init toggle-init">
                  <input type="checkbox" checked disabled>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Thor</div>
              <div class="item-after">
                <div class="toggle toggle-init color-orange">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Wonder</div>
              <div class="item-after">
                <div class="toggle toggle-init color-pink">
                  <input type="checkbox">
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>
改进此文档
在本页上