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

ラジオボタン

ラジオボタンレイアウト

ラジオボタンレイアウトは非常にシンプルです

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

ラジオボタングループ/リスト

ラジオボタングループ/リストを作成するには、リストビューをいくつかの追加事項と併用する必要があります

<div class="list">
  <ul>
    <!-- Single radio item -->
    <li>
      <label class="item-radio item-content">
        <!-- Radio input -->
        <input type="radio" name="my-radio" value="radio-1" />
        <!-- Radio icon -->
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <!-- Radio Title -->
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another radio item -->
    <li>
      <label class="item-radio item-content">
        <!-- Checked by default -->
        <input type="radio" name="my-radio" value="radio-2" checked />
        <i class="icon icon-radio"></i>
        <div class="item-inner">
          <div class="item-title">Music</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>
  • item-content は、追加の item-radio クラスを持つ <label> 要素である必要があります
  • ラジオボタン入力 (<input type="radio" />) は、item-content の最初の子要素である必要があります
  • ラジオボタンアイコンは、ラジオボタン入力の**後**にある必要があります

ラジオボタンアイコンの位置

デフォルトでは、ラジオボタンリストアイテムアイコンは、iOSテーマではリストアイテムの最後に、MDテーマではリストアイテムの先頭に表示されます。

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

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

<!-- Additional "item-radio-icon-start" class will force radio icon to appear in the beginning of the list item for all themes -->
<li>
  <!-- Additional "item-radio-icon-start" class -->
  <label class="item-radio item-radio-icon-start item-content">
    <!-- Radio input -->
    <input type="radio" name="my-radio" value="radio-1" />
    <!-- Radio icon -->
    <i class="icon icon-radio"></i>
    <div class="item-inner">
      <!-- Radio Title -->
      <div class="item-title">Books</div>
    </div>
  </label>
</li>

<!-- Additional "item-radio-icon-end" class will force radio icon to appear in the end of the list item for all themes -->
<li>
  <!-- Additional "item-radio-icon-end" class -->
  <label class="item-radio item-radio-icon-end item-content">
    <!-- Radio input -->
    <input type="radio" name="my-radio" value="radio-1" />
    <!-- Radio icon -->
    <i class="icon icon-radio"></i>
    <div class="item-inner">
      <!-- Radio Title -->
      <div class="item-title">Books</div>
    </div>
  </label>
</li>

CSS変数

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

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

:root {
  /*
  --f7-radio-active-color: var(--f7-theme-color);
  */
  --f7-radio-border-radius: 50%;
  --f7-radio-extra-margin: 0px;
}
:root .dark,
:root.dark {
  --f7-radio-inactive-color: rgba(255, 255, 255, 0.3);
}
.ios {
  --f7-radio-size: 22px;
  --f7-radio-border-width: 1px;
  --f7-radio-inactive-color: #c7c7cc;
}
.md {
  --f7-radio-size: 20px;
  --f7-radio-border-width: 2px;
  --f7-radio-inactive-color: #6d6d6d;
}

例

radio.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Radio</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="radio"><input type="radio" name="demo-radio-inline"><i class="icon-radio"></i></label>
        ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet
        aliquid eligendi <label class="radio"><input type="radio" name="demo-radio-inline"><i
            class="icon-radio"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla
        mollitia!</p>
    </div>
    <div class="block-title">Radio Group</div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Books" checked />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Books</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Movies" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Movies</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Food" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Food</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Drinks" />
            <i class="icon icon-radio"></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-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Books" checked />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Books</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Movies" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Movies</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Food" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Food</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Drinks" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Drinks</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
    <div class="block-title">With Media Lists</div>
    <div class="list media-list list-strong-ios list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-media-radio" value="1" checked />
            <i class="icon icon-radio" checked></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-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-media-radio" value="2" />
            <i class="icon icon-radio"></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-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-media-radio" value="3" />
            <i class="icon icon-radio"></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-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-media-radio" value="4" />
            <i class="icon icon-radio"></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>
このドキュメントを改善する
このページについて