单选和复选按钮 - Framework7 表单 - [ Framework7 ]

单选和复选按钮

这是一个列表拓展，可以用来创建单选和复选按钮组。

复选按钮组

<div class="list-block">
  <ul>
    <!-- Single chekbox item -->
    <li>
      <label class="label-checkbox item-content">
        <!-- Checked by default -->
        <input type="checkbox" name="my-checkbox" value="Books" checked="checked">
        <div class="item-media">
          <i class="icon icon-form-checkbox"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another chekbox item -->
    <li>
      <label class="label-checkbox item-content">
        <input type="checkbox" name="my-checkbox" value="Movies">
        <div class="item-media">
          <i class="icon icon-form-checkbox"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Movies</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>

"item-content" 应该是一个label，并且有一个 "label-checkbox" class.
Checkbox (<input type="checkbox">) 必须是 "item-content" 的第一个子元素
Checkbox icon must be in "item-media"

实例预览

Radios group iOS

Let's look at radio inputs group layout:

<div class="list-block">
  <ul>
    <!-- Single radio input -->
    <li>
      <label class="label-radio item-content">
        <!-- Checked by default -->
        <input type="radio" name="my-radio" value="Books" checked="checked">
        <div class="item-inner">
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another radio input -->
    <li>
      <label class="label-radio item-content">
        <input type="radio" name="my-radio" value="Movies">
        <div class="item-inner">
          <div class="item-title">Movies</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>

"item-content" 应该是一个Label元素，并且需要有一个 "label-radio" class
Radio input (<input type="radio">) must be a first child of "item-content"

实例预览

Radios group Material

Note that in Material theme you'll have to add additional icon for Radios:

<div class="list-block">
  <ul>
    <!-- Single radio input -->
    <li>
      <label class="label-radio item-content">
        <!-- Checked by default -->
        <input type="radio" name="my-radio" value="Books" checked="checked">
        <div class="item-media">
          <i class="icon icon-form-radio"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Books</div>
        </div>
      </label>
    </li>
    <!-- Another radio input -->
    <li>
      <label class="label-radio item-content">
        <input type="radio" name="my-radio" value="Movies">
        <div class="item-media">
          <i class="icon icon-form-radio"></i>
        </div>
        <div class="item-inner">
          <div class="item-title">Movies</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>

实例预览

With media list view

You can use checkboxes and radios groups with media list view:

<div class="content-block-title">Select Message</div>
<div class="list-block media-list">
  <ul>
    <li>
      <label class="label-checkbox item-content">
        <input type="checkbox" name="my-checkbox">
        <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
        <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...</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>

<div class="content-block-title">What is your favourite song?</div>
<div class="list-block media-list">
  <ul>
    <li>
      <label class="label-radio item-content">
        <input type="radio" name="my-radio" checked>
        <div class="item-media"><img src="..." width="80"></div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">Yellow Submarine</div>
            <div class="item-after">$15</div>
          </div>
          <div class="item-subtitle">Beatles</div>
          <div class="item-text">Lorem ipsum dolor ...</div>
        </div>
      </label>
    </li>
    ...
  </ul>
</div>

实例预览