单选按钮

无线电布局

无线电布局相当简单：

<!-- 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必须是一个<label>带有附加item-radio类
  • 无线电输入（<input type="radio" />）必须是item-content
  • 无线电图标的后置无线电输入

无线电图标位置

默认情况下，iOS主题中无线电列表项图标显示在列表项的末尾，而MD主题中显示在列表项的开头。

并且可以覆盖此行为以指定无线电列表项图标的位置 - 在列表项的开头或末尾。

要做到这一点，我们需要添加额外的item-radio-icon-start或item-radio-icon-end添加额外的类到item-radio:

<!-- 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>
改进此文档
在本页上