Badge - 图1

Badge

Badges are used to display/indicate count numbers and labels on different elements of your app.

Badge Layout

Badges have a super simple layout, it’s just an element with a badge class:

  1. <span class="badge">32</span>

Badge Colors

Badges support all default colors:

  1. <!-- Green badge -->
  2. <span class="badge color-green">32</span>
  4. <!-- Red badge -->
  5. <span class="badge color-red">15</span>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

  1. :root {
  2.   --f7-badge-text-color: #fff;
  3.   --f7-badge-bg-color: #8e8e93;
  4.   --f7-badge-padding: 0 4px;
  5.   --f7-badge-in-icon-size: 16px;
  6.   --f7-badge-in-icon-font-size: 10px;
  7.   --f7-badge-font-weight: normal;
  8.   --f7-badge-font-size: 12px;
  9. }
  10. .ios {
  11.   --f7-badge-size: 20px;
  12. }
  13. .md {
  14.   --f7-badge-size: 18px;
  15. }
  16. .aurora {
  17.   --f7-badge-size: 18px;
  18.   --f7-badge-font-weight: 600;
  19.   --f7-badge-in-icon-size: 15px;
  20. }

Examples

  1. <div class="page">
  2.   <div class="navbar">
  3.     <div class="navbar-bg"></div>
  4.     <div class="navbar-inner">
  5.       <div class="left"></div>
  6.       <div class="title">Badge</div>
  7.       <div class="right">
  8.         <a class="link icon-only">
  9.           <i class="icon f7-icons if-not-md">person_fill<span class="badge color-red">5</span></i>
  10.           <i class="icon material-icons md-only">person<span class="badge color-red">5</span></i>
  11.         </a>
  12.       </div>
  13.     </div>
  14.   </div>
  15.   <div class="toolbar tabbar tabbar-labels toolbar-bottom">
  16.     <div class="toolbar-inner">
  17.     <a href="#tab-1" class="tab-link tab-link-active">
  18.       <i class="icon icon-fill f7-icons if-not-md">envelope_fill<span class="badge color-green">5</span></i>
  19.       <i class="icon material-icons md-only">email<span class="badge color-green">5</span></i>
  20.       <span class="tabbar-label">Inbox</span>
  21.     </a>
  22.     <a href="#tab-2" class="tab-link">
  23.       <i class="icon f7-icons if-not-md">today<span class="badge color-red">7</span></i>
  24.       <i class="icon material-icons md-only">today<span class="badge color-red">7</span></i>
  25.       <span class="tabbar-label">Calendar</span>
  26.     </a>
  27.     <a href="#tab-3" class="tab-link">
  28.       <i class="icon f7-icons if-not-md">cloud<span class="badge color-red">1</span></i>
  29.       <i class="icon material-icons md-only">file_upload<span class="badge color-red">1</span></i>
  30.       <span class="tabbar-label">Upload</span>
  31.     </a>
  32.     </div>
  33.   </div>
  34.   <div class="page-content">
  35.     <div class="list">
  36.       <ul>
  37.         <li>
  38.           <div class="item-content">
  39.             <div class="item-inner">
  40.               <div class="item-title">Foo Bar</div>
  41.               <div class="item-after"><span class="badge">0</span></div>
  42.             </div>
  43.           </div>
  44.         </li>
  45.         <li>
  46.           <div class="item-content">
  47.             <div class="item-inner">
  48.               <div class="item-title">Ivan Petrov</div>
  49.               <div class="item-after"><span class="badge color-blue">CEO</span></div>
  50.             </div>
  51.           </div>
  52.         </li>
  53.         <li>
  54.           <div class="item-content">
  55.             <div class="item-inner">
  56.               <div class="item-title">John Doe</div>
  57.               <div class="item-after"><span class="badge color-green">5</span></div>
  58.             </div>
  59.           </div>
  60.         </li>
  61.         <li>
  62.           <div class="item-content">
  63.             <div class="item-inner">
  64.               <div class="item-title">Jane Doe</div>
  65.               <div class="item-after"><span class="badge color-orange">NEW</span></div>
  66.             </div>
  67.           </div>
  68.         </li>
  69.       </ul>
  70.     </div>
  71.   </div>
  72. </div>

← Autocomplete

Block / Content Block →