-
Get Started
-
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
Badge Vue Component
Badge Vue component represents Badge element that can be used in lists, links, navigation bars, etc.
Badge Components
There are following components included:
f7-badge
Examples
<f7-page>
<f7-navbar sliding title="Badge">
<f7-nav-right>
<f7-link icon-only>
<f7-icon ios="f7:person_fill" md="material:person" class="icon f7-icons ios-only">
<f7-badge color="red">5</f7-badge>
</f7-icon>
</f7-link>
</f7-nav-right>
</f7-navbar>
<f7-toolbar tabbar labels>
<f7-link tab-link="#tab-1" tab-link-active>
<f7-icon class="icon-fill" ios="f7:email_fill" md="material:email">
<f7-badge color="green">5</f7-badge>
</f7-icon>
<span class="tabbar-label">Inbox</span>
</f7-link>
<f7-link tab-link="#tab-2">
<f7-icon ios="f7:today" md="material:today">
<f7-badge color="red">7</f7-badge>
</f7-icon>
<span class="tabbar-label">Calendar</span>
</f7-link>
<f7-link tab-link="#tab-3">
<f7-icon ios="f7:cloud" md="material:file_upload">
<f7-badge color="red">1</f7-badge>
</f7-icon>
<span class="tabbar-label">Upload</span>
</f7-link>
</f7-toolbar>
<f7-list>
<f7-list-item title="Foo Bar" badge="0"></f7-list-item>
<f7-list-item title="Ivan Petrov" badge="CEO" badge-color="blue"></f7-list-item>
<f7-list-item title="John Doe" badge="5" badge-color="green"></f7-list-item>
<f7-list-item title="Jane Doe" badge="NEW" badge-color="orange"></f7-list-item>
</f7-list>
</f7-page>