-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Lazy Modules
-
Custom Build
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:
<span class="badge">32</span>
Badge Colors
Badges support all default colors:
<!-- Green badge -->
<span class="badge color-green">32</span>
<!-- Red badge -->
<span class="badge color-red">15</span>
Examples
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left"></div>
<div class="title">Badge</div>
<div class="right">
<a class="link icon-only">
<i class="icon f7-icons ios-only">person_fill<span class="badge color-red">5</span></i>
<i class="icon material-icons md-only">person<span class="badge color-red">5</span></i>
</a>
</div>
</div>
</div>
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">
<i class="icon icon-fill f7-icons ios-only">email_fill<span class="badge color-green">5</span></i>
<i class="icon material-icons md-only">email<span class="badge color-green">5</span></i>
<span class="tabbar-label">Inbox</span>
</a>
<a href="#tab-2" class="tab-link">
<i class="icon f7-icons ios-only">today<span class="badge color-red">7</span></i>
<i class="icon material-icons md-only">today<span class="badge color-red">7</span></i>
<span class="tabbar-label">Calendar</span>
</a>
<a href="#tab-3" class="tab-link">
<i class="icon f7-icons ios-only">cloud<span class="badge color-red">1</span></i>
<i class="icon material-icons md-only">file_upload<span class="badge color-red">1</span></i>
<span class="tabbar-label">Upload</span>
</a>
</div>
</div>
<div class="page-content">
<div class="list">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Foo Bar</div>
<div class="item-after"><span class="badge">0</span></div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Ivan Petrov</div>
<div class="item-after"><span class="badge color-blue">CEO</span></div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">John Doe</div>
<div class="item-after"><span class="badge color-green">5</span></div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Jane Doe</div>
<div class="item-after"><span class="badge color-orange">NEW</span></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>