移动端安卓和IOS开发框架Framework7教程-单选和复选按钮

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

复选按钮组

1. <div class="list-block">
2.   <ul>
3.     <!-- Single chekbox item -->
4.     <li>
5.       <label class="label-checkbox item-content">
6.         <!-- Checked by default -->
7.         <input type="checkbox" name="my-checkbox" value="Books" checked="checked">
8.         <div class="item-media">
9.           <i class="icon icon-form-checkbox"></i>
10.         </div>
11.         <div class="item-inner">
12.           <div class="item-title">Books</div>
13.         </div>
14.       </label>
15.     </li>
16.     <!-- Another chekbox item -->
17.     <li>
18.       <label class="label-checkbox item-content">
19.         <input type="checkbox" name="my-checkbox" value="Movies">
20.         <div class="item-media">
21.           <i class="icon icon-form-checkbox"></i>
22.         </div>
23.         <div class="item-inner">
24.           <div class="item-title">Movies</div>
25.         </div>
26.       </label>
27.     </li>
28.     ...
29.   </ul>
30. </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:

1. <div class="list-block">
2.   <ul>
3.     <!-- Single radio input -->
4.     <li>
5.       <label class="label-radio item-content">
6.         <!-- Checked by default -->
7.         <input type="radio" name="my-radio" value="Books" checked="checked">
8.         <div class="item-inner">
9.           <div class="item-title">Books</div>
10.         </div>
11.       </label>
12.     </li>
13.     <!-- Another radio input -->
14.     <li>
15.       <label class="label-radio item-content">
16.         <input type="radio" name="my-radio" value="Movies">
17.         <div class="item-inner">
18.           <div class="item-title">Movies</div>
19.         </div>
20.       </label>
21.     </li>
22.     ...
23.   </ul>
24. </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:

1. <div class="list-block">
2.   <ul>
3.     <!-- Single radio input -->
4.     <li>
5.       <label class="label-radio item-content">
6.         <!-- Checked by default -->
7.         <input type="radio" name="my-radio" value="Books" checked="checked">
8.         <div class="item-media">
9.           <i class="icon icon-form-radio"></i>
10.         </div>
11.         <div class="item-inner">
12.           <div class="item-title">Books</div>
13.         </div>
14.       </label>
15.     </li>
16.     <!-- Another radio input -->
17.     <li>
18.       <label class="label-radio item-content">
19.         <input type="radio" name="my-radio" value="Movies">
20.         <div class="item-media">
21.           <i class="icon icon-form-radio"></i>
22.         </div>
23.         <div class="item-inner">
24.           <div class="item-title">Movies</div>
25.         </div>
26.       </label>
27.     </li>
28.     ...
29.   </ul>
30. </div>

复制

实例预览

With media list view

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

1. <div class="content-block-title">Select Message</div>
2. <div class="list-block media-list">
3.   <ul>
4.     <li>
5.       <label class="label-checkbox item-content">
6.         <input type="checkbox" name="my-checkbox">
7.         <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
8.         <div class="item-inner">
9.           <div class="item-title-row">
10.             <div class="item-title">Facebook</div>
11.             <div class="item-after">17:14</div>
12.           </div>
13.           <div class="item-subtitle">New messages from John Doe</div>
14.           <div class="item-text">Lorem ipsum dolor sit amet...</div>
15.         </div>
16.       </label>
17.     </li>
18.     ...
19.   </ul>
20. </div>
21.  
22. <div class="content-block-title">What is your favourite song?</div>
23. <div class="list-block media-list">
24.   <ul>
25.     <li>
26.       <label class="label-radio item-content">
27.         <input type="radio" name="my-radio" checked>
28.         <div class="item-media"><img src="..." width="80"></div>
29.         <div class="item-inner">
30.           <div class="item-title-row">
31.             <div class="item-title">Yellow Submarine</div>
32.             <div class="item-after">$15</div>
33.           </div>
34.           <div class="item-subtitle">Beatles</div>
35.           <div class="item-text">Lorem ipsum dolor ...</div>
36.         </div>
37.       </label>
38.     </li>
39.     ...
40.   </ul>
41. </div>

复制

实例预览