Radio - 图1

Radio

Radio Layout

Radio layout is pretty simple:

  1. <!-- radio element -->
  2. <label class="radio">
  3. <!-- radio input -->
  4. <input type="radio">
  5. <!-- radio icon -->
  6. <i class="icon-radio"></i>
  7. </label>

Radio Group/List

To create Radio group/list we need to use List View with few additions:

  1. <div class="list">
  2. <ul>
  3. <!-- Single radio item -->
  4. <li>
  5. <label class="item-radio item-content">
  6. <!-- Radio input -->
  7. <input type="radio" name="my-radio" value="radio-1"/>
  8. <!-- Radio icon -->
  9. <i class="icon icon-radio"></i>
  10. <div class="item-inner">
  11. <!-- Radio Title -->
  12. <div class="item-title">Books</div>
  13. </div>
  14. </label>
  15. </li>
  16. <!-- Another radio item -->
  17. <li>
  18. <label class="item-radio item-content">
  19. <!-- Checked by default -->
  20. <input type="radio" name="my-radio" value="radio-2" checked/>
  21. <i class="icon icon-radio"></i>
  22. <div class="item-inner">
  23. <div class="item-title">Music</div>
  24. </div>
  25. </label>
  26. </li>
  27. ...
  28. </ul>
  29. </div>
  • item-content must be a **<label>** element with additional **item-radio** class
  • Radio input (<input type="radio">) must be a first child of item-content
  • Radio icon must be after radio input

Examples

Inline

  1. <div class="block block-strong">
  2. <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>
  3. </div>

Radio Group

  1. <div class="list">
  2. <ul>
  3. <li>
  4. <label class="item-radio item-content">
  5. <input type="radio" name="demo-radio" value="Books" checked />
  6. <i class="icon icon-radio"></i>
  7. <div class="item-inner">
  8. <div class="item-title">Books</div>
  9. </div>
  10. </label>
  11. </li>
  12. <li>
  13. <label class="item-radio item-content">
  14. <input type="radio" name="demo-radio" value="Movies"/>
  15. <i class="icon icon-radio"></i>
  16. <div class="item-inner">
  17. <div class="item-title">Movies</div>
  18. </div>
  19. </label>
  20. </li>
  21. <li>
  22. <label class="item-radio item-content">
  23. <input type="radio" name="demo-radio" value="Food"/>
  24. <i class="icon icon-radio"></i>
  25. <div class="item-inner">
  26. <div class="item-title">Food</div>
  27. </div>
  28. </label>
  29. </li>
  30. <li>
  31. <label class="item-radio item-content">
  32. <input type="radio" name="demo-radio" value="Drinks"/>
  33. <i class="icon icon-radio"></i>
  34. <div class="item-inner">
  35. <div class="item-title">Drinks</div>
  36. </div>
  37. </label>
  38. </li>
  39. </ul>
  40. </div>

With Media Lists

  1. <div class="list media-list">
  2. <ul>
  3. <li>
  4. <label class="item-radio item-content">
  5. <input type="radio" name="demo-media-radio" value="1" checked />
  6. <i class="icon icon-radio" checked></i>
  7. <div class="item-inner">
  8. <div class="item-title-row">
  9. <div class="item-title">Facebook</div>
  10. <div class="item-after">17:14</div>
  11. </div>
  12. <div class="item-subtitle">New messages from John Doe</div>
  13. <div class="item-text">Lorem ipsum ...</div>
  14. </div>
  15. </label>
  16. </li>
  17. <li>
  18. <label class="item-radio item-content">
  19. <input type="radio" name="demo-media-radio" value="2"/>
  20. <i class="icon icon-radio"></i>
  21. <div class="item-inner">
  22. <div class="item-title-row">
  23. <div class="item-title">John Doe (via Twitter)</div>
  24. <div class="item-after">17:11</div>
  25. </div>
  26. <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
  27. <div class="item-text">Lorem ipsum ...</div>
  28. </div>
  29. </label>
  30. </li>
  31. <li>
  32. <label class="item-radio item-content">
  33. <input type="radio" name="demo-media-radio" value="3"/>
  34. <i class="icon icon-radio"></i>
  35. <div class="item-inner">
  36. <div class="item-title-row">
  37. <div class="item-title">Facebook</div>
  38. <div class="item-after">16:48</div>
  39. </div>
  40. <div class="item-subtitle">New messages from John Doe</div>
  41. <div class="item-text">Lorem ipsum ...</div>
  42. </div>
  43. </label>
  44. </li>
  45. <li>
  46. <label class="item-radio item-content">
  47. <input type="radio" name="demo-media-radio" value="4"/>
  48. <i class="icon icon-radio"></i>
  49. <div class="item-inner">
  50. <div class="item-title-row">
  51. <div class="item-title">John Doe (via Twitter)</div>
  52. <div class="item-after">15:32</div>
  53. </div>
  54. <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
  55. <div class="item-text">Lorem ipsum ...</div>
  56. </div>
  57. </label>
  58. </li>
  59. </ul>
  60. </div>