我的书签
添加书签
移除书签
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>
