スポンサースポンサーになる

チェックボックス

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

チェックボックスのレイアウトは非常にシンプルです

<!-- checkbox element -->
<label class="checkbox">
  <!-- checkbox input -->
  <input type="checkbox" />
  <!-- checkbox icon -->
  <i class="icon-checkbox"></i>
</label>

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

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

<div class="list">
  <ul>
    <!-- Single checkbox item -->
    <li>
      <label class="item-checkbox item-content">
        <!-- Checkbox input -->
        <input type="checkbox" />
        <!-- Checkbox icon -->
        <i class="icon icon-checkbox"></i>
        <div class="item-inner">
          <!-- Checkbox Title -->
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another checkbox item -->
    <li>
      <label class="item-checkbox item-content">
        <!-- Checked by default -->
        <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 は、追加の item-checkbox クラスを持つ <label> 要素でなければなりません
  • チェックボックス入力 (<input type="checkbox" />) は、item-content の最初の子要素でなければなりません
  • チェックボックスアイコンは、チェックボックス入力の**後**ろに配置する必要があります

不確定状態

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);

しかし、ルーターコンポーネントと一緒に使用すると、この属性が自動的に検出され、要素プロパティとして設定されるため、テンプレートで使用できます

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

チェックボックスアイコンの位置

デフォルトでは、チェックボックスリストアイテムアイコンはリストアイテムの先頭に表示されます。

そして、この動作をオーバーライドして、チェックボックスリストアイテムアイコンの位置をリストアイテムの先頭または末尾に指定することができます。

これを行うには、item-checkbox に追加の item-checkbox-icon-start または item-checkbox-icon-end クラスを追加する必要があります

<!-- Additional "item-checkbox-icon-end" class will force checkbox icon to appear in the beginning of the list item for all themes -->
<li>
  <!-- Additional "item-checkbox-icon-end" class -->
  <label class="item-checkbox item-checkbox-icon-end item-content">
    <!-- Checkbox input -->
    <input type="checkbox" />
    <!-- Checkbox icon -->
    <i class="icon icon-checkbox"></i>
    <div class="item-inner">
      <!-- Checkbox Title -->
      <div class="item-title">Books</div>
    </div>
  </label>
</li>

CSS変数

以下は、関連する CSS 変数 (CSS カスタムプロパティ) のリストです。

コメントアウトされている変数はデフォルトでは指定されておらず、その値はこの場合のフォールバック値であることに注意してください。

:root {
  /* --f7-checkbox-active-color: var(--f7-theme-color); */
  --f7-checkbox-icon-color: #fff;
  --f7-checkbox-extra-margin: 0px;
}
:root .dark,
:root.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;
}

例

checkbox.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Checkbox</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Inline</div>
      <div class="block block-strong-ios block-outline-ios">
        <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 list-strong-ios list-outline-ios list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Books" 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-checkbox-icon-start 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-checkbox-icon-start 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-checkbox-icon-start 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="list list-strong-ios list-outline-ios list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Books" 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-checkbox-icon-end 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-checkbox-icon-end 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-checkbox-icon-end 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 list-strong-ios list-outline-ios list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" checked=${movies.length===2}
                indeterminate=${movies.length===1} @change=${onMoviesChange} />
              <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-checkbox-icon-start item-content">
                  <input type="checkbox" name="demo-checkbox" value="Movie 1" checked=${movies.indexOf('Movie 1')>= 0}
                  @change=${onMovieChange}
                  />
                  <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-checkbox-icon-start item-content">
                  <input type="checkbox" name="demo-checkbox" value="Movie 2" checked=${movies.indexOf('Movie 2')>= 0}
                  @change=${onMovieChange}
                  />
                  <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 list-strong-ios list-outline-ios list-dividers-ios media-list">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start 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-checkbox-icon-start 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-checkbox-icon-start 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-checkbox-icon-start 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, { $update }) => {
    let movies = ['Movie 1'];

    const onMovieChange = (e) => {
      var value = e.target.value;
      if (e.target.checked) {
        movies.push(value);
      } else {
        movies.splice(movies.indexOf(value), 1);
      }
      $update();
    }
    const onMoviesChange = (e) => {
      if (movies.length === 1 || movies.length === 0) {
        movies = ['Movie 1', 'Movie 2'];
      } else if (movies.length === 2) {
        movies = [];
      }
      $update();
    }

    return $render;
  };
</script>
このドキュメントを改善する
このページについて