スポンサー
Support Framework7

チェックボックス

    チェックボックスのレイアウト

    チェックボックスのレイアウトはとてもシンプルです。

    <!-- チェックボックス要素 -->
    <label class="checkbox">
      <!-- チェックボックスの入力 -->
      <input type="checkbox" />
      <!-- チェックボックスのアイコン -->
      <i class="icon-checkbox"></i>
    </label>

    チェックボックスのグループ/リスト

    チェックボックスのグループ/リストを作成するには、リストビューを使用する必要がありますが、いくつかの追加事項があります。

    <div class="list">
      <ul>
        <!-- 単一のチェックボックス項目 -->
        <li>
          <label class="item-checkbox item-content">
            <!-- チェックボックスの入力 -->
            <input type="checkbox" />
            <!-- チェックボックスのアイコン -->
            <i class="icon icon-checkbox"></i>
            <div class="item-inner">
              <!-- チェックボックスのタイトル -->
              <div class="item-title">Books</div>
            </div>
          </label>
        </li>
        <!-- 別のチェックボックス項目 -->
        <li>
          <label class="item-checkbox item-content">
            <!-- デフォルトではチェックされています。 -->
            <input type="checkbox" checked />
            <i class="icon icon-checkbox"></i>
            <div class="item-inner">
              <div class="item-title">Music</div>
            </div>
          </label>
        </li>
        ...
      </ul>
    </div>
    • item-content<label> 要素に item-checkbox クラスを追加したものでなければなりません。
    • チェックボックスの入力 (<input type="checkbox" />) は、item-content の第一子でなければなりません。
    • チェックボックスアイコンは、afterチェックボックス入力でなければなりません。

    不確定な状態

    Framework7では、不確定なチェックボックスの状態を視覚的にサポートしています。

    HTMLでは、この状態を属性で設定することはできず、JavaScriptでのみ設定することができます。

    <input type="checkbox" id="my-checkbox" />
    var checkboxEl = document.querySelector('#my-checkbox');
    checkboxEl.indeterminate = true;

    またはDom7で

    var $checkboxEl = $('#my-checkbox');
    $checkboxEl.prop('indeterminate', true);

    しかし、Router Componentと一緒に使うと、自動的にこの属性を検出し、要素のプロパティとして設定しますので、テンプレートで使用することができます。

    <input type="checkbox" {{#if something}}indeterminate{{/if}} id="my-checkbox" />
    

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    Note that commented variables are not specified by default and their values is what they fallback to in this case.

    :root {
      /* --f7-checkbox-active-color: var(--f7-theme-color); */
      --f7-checkbox-icon-color: #fff;
      --f7-checkbox-extra-margin: 0px;
    }
    :root .theme-dark,
    :root.theme-dark {
      --f7-checkbox-inactive-color: rgba(255, 255, 255, 0.3);
      --f7-checkbox-icon-color: #000;
    }
    .ios {
      --f7-checkbox-size: 22px;
      --f7-checkbox-border-radius: 50%;
      --f7-checkbox-border-width: 1px;
      --f7-checkbox-inactive-color: #c7c7cc;
    }
    .md {
      --f7-checkbox-size: 18px;
      --f7-checkbox-border-radius: 2px;
      --f7-checkbox-border-width: 2px;
      --f7-checkbox-inactive-color: #6d6d6d;
    }
    .aurora {
      --f7-checkbox-size: 16px;
      --f7-checkbox-border-radius: 4px;
      --f7-checkbox-border-width: 1px;
      --f7-checkbox-inactive-color: rgba(0, 0, 0, 0.25);
    }
    

    Examples

    <template>
      <div class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Checkbox</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block-title">Inline</div>
          <div class="block block-strong">
            <p>Lorem <label class="checkbox"><input type="checkbox" /><i class="icon-checkbox"></i></label> ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi <label class="checkbox"><input type="checkbox" /><i class="icon-checkbox"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla mollitia!</p>
          </div>
          <div class="block-title">Checkbox Group</div>
          <div class="list">
            <ul>
              <li>
                <label class="item-checkbox item-content">
                  <input type="checkbox" name="demo-checkbox" value="Books" checked="checked" />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Books</div>
                  </div>
                </label>
              </li>
              <li>
                <label class="item-checkbox item-content">
                  <input type="checkbox" name="demo-checkbox" value="Movies" />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Movies</div>
                  </div>
                </label>
              </li>
              <li>
                <label class="item-checkbox item-content">
                  <input type="checkbox" name="demo-checkbox" value="Food" />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Food</div>
                  </div>
                </label>
              </li>
              <li>
                <label class="item-checkbox item-content">
                  <input type="checkbox" name="demo-checkbox" value="Drinks" />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Drinks</div>
                  </div>
                </label>
              </li>
            </ul>
          </div>
          <div class="block-title">Indeterminate State</div>
          <div class="list">
            <ul>
              <li>
                <label class="item-checkbox item-content">
                  <input type="checkbox" name="demo-checkbox-movies" />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title">Movies</div>
                  </div>
                </label>
                <ul>
                  <li>
                    <label class="item-checkbox item-content">
                      <input type="checkbox" name="demo-checkbox-movie" value="Movie 1" />
                      <i class="icon icon-checkbox"></i>
                      <div class="item-inner">
                        <div class="item-title">Movie 1</div>
                      </div>
                    </label>
                  </li>
                  <li>
                    <label class="item-checkbox item-content">
                      <input type="checkbox" name="demo-checkbox-movie" value="Movie 2" />
                      <i class="icon icon-checkbox"></i>
                      <div class="item-inner">
                        <div class="item-title">Movie 2</div>
                      </div>
                    </label>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="block-title">With Media Lists</div>
          <div class="list media-list">
            <ul>
              <li>
                <label class="item-checkbox item-content">
                  <input type="checkbox" name="demo-media-checkbox" value="1" />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">Facebook</div>
                      <div class="item-after">17:14</div>
                    </div>
                    <div class="item-subtitle">New messages from John Doe</div>
                    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                      tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
                  </div>
                </label>
              </li>
              <li>
                <label class="item-checkbox item-content">
                  <input type="checkbox" name="demo-media-checkbox" value="2" />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">John Doe (via Twitter)</div>
                      <div class="item-after">17:11</div>
                    </div>
                    <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
                    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                      tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
                  </div>
                </label>
              </li>
              <li>
                <label class="item-checkbox item-content">
                  <input type="checkbox" name="demo-media-checkbox" value="3" />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">Facebook</div>
                      <div class="item-after">16:48</div>
                    </div>
                    <div class="item-subtitle">New messages from John Doe</div>
                    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                      tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
                  </div>
                </label>
              </li>
              <li>
                <label class="item-checkbox item-content">
                  <input type="checkbox" name="demo-media-checkbox" value="4" />
                  <i class="icon icon-checkbox"></i>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">John Doe (via Twitter)</div>
                      <div class="item-after">15:32</div>
                    </div>
                    <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
                    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                      tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
                  </div>
                </label>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </template>
    <script>
      export default (props, { $, $on }) => {
        $on('pageInit', () => {
          // Child checkbox change
          $('[name="demo-checkbox-movie"]').on('change', function (e) {
            var totalChecked = $('[name="demo-checkbox-movie"]:checked').length;
            if (totalChecked === 0) {
              $('[name="demo-checkbox-movies"]').prop('checked', false);
            } else if (totalChecked === 2) {
              $('[name="demo-checkbox-movies"]').prop('checked', true);
            }
            if (totalChecked === 1) {
              $('[name="demo-checkbox-movies"]').prop('indeterminate', true);
            } else {
              $('[name="demo-checkbox-movies"]').prop('indeterminate', false);
            }
          });
    
          // Parent checkbox change
          $('[name="demo-checkbox-movies"]').on('change', function (e) {
            if (e.target.checked) {
              $('[name="demo-checkbox-movie"]').prop('checked', true);
            } else {
              $('[name="demo-checkbox-movie"]').prop('checked', false);
            }
          });
        })
    
        return $render;
      }
    </script>