Radio
Radio Layout
Radio layout is pretty simple:
<!-- radio element -->
<label class="radio">
<!-- radio input -->
<input type="radio">
<!-- radio icon -->
<i class="icon-radio"></i>
</label>
Radio Group/List
To create Radio group/list we need to use List View with few additions:
<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
must be a**<label>**
element with additional**item-radio**
class- Radio input (
<input type="radio">
) must be a first child ofitem-content
- Radio icon must be after radio input
Examples
Inline
<div class="block block-strong">
<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>
Radio Group
<div class="list">
<ul>
<li>
<label class="item-radio item-content">
<input type="radio" name="demo-radio" 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-content">
<input type="radio" name="demo-radio" 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-content">
<input type="radio" name="demo-radio" 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-content">
<input type="radio" name="demo-radio" value="Drinks"/>
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title">Drinks</div>
</div>
</label>
</li>
</ul>
</div>
With Media Lists
<div class="list media-list">
<ul>
<li>
<label class="item-radio 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 ...</div>
</div>
</label>
</li>
<li>
<label class="item-radio 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 ...</div>
</div>
</label>
</li>
<li>
<label class="item-radio 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 ...</div>
</div>
</label>
</li>
<li>
<label class="item-radio 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 ...</div>
</div>
</label>
</li>
</ul>
</div>
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .