Badge - 图1

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

  1. <f7-page>
  2. <f7-navbar sliding title="Badge">
  3. <f7-nav-right>
  4. <f7-link icon-only>
  5. <f7-icon ios="f7:person_fill" aurora="f7:person_fill" md="material:person" class="icon f7-icons ios-only">
  6. <f7-badge color="red">5</f7-badge>
  7. </f7-icon>
  8. </f7-link>
  9. </f7-nav-right>
  10. </f7-navbar>
  11. <f7-toolbar bottom tabbar labels>
  12. <f7-link tab-link="#tab-1" tab-link-active>
  13. <f7-icon class="icon-fill" ios="f7:email_fill" aurora="f7:email_fill" md="material:email">
  14. <f7-badge color="green">5</f7-badge>
  15. </f7-icon>
  16. <span class="tabbar-label">Inbox</span>
  17. </f7-link>
  18. <f7-link tab-link="#tab-2">
  19. <f7-icon ios="f7:today" aurora="f7:today" md="material:today">
  20. <f7-badge color="red">7</f7-badge>
  21. </f7-icon>
  22. <span class="tabbar-label">Calendar</span>
  23. </f7-link>
  24. <f7-link tab-link="#tab-3">
  25. <f7-icon ios="f7:cloud" aurora="f7:cloud" md="material:file_upload">
  26. <f7-badge color="red">1</f7-badge>
  27. </f7-icon>
  28. <span class="tabbar-label">Upload</span>
  29. </f7-link>
  30. </f7-toolbar>
  31. <f7-list>
  32. <f7-list-item title="Foo Bar" badge="0"></f7-list-item>
  33. <f7-list-item title="Ivan Petrov" badge="CEO" badge-color="blue"></f7-list-item>
  34. <f7-list-item title="John Doe" badge="5" badge-color="green"></f7-list-item>
  35. <f7-list-item title="Jane Doe" badge="NEW" badge-color="orange"></f7-list-item>
  36. </f7-list>
  37. </f7-page>