Badge Svelte Component

Badge Svelte component represents Badge element that can be used in lists, links, navigation bars, etc.

Badge Components

There are following components included:

• Badge

Examples

1. <Page>
2. <Navbar sliding title="Badge">
3. <NavRight>
4. <Link iconOnly>
5. <Icon ios="f7:person_fill" aurora="f7:person_fill" md="material:person">
6. <Badge color="red">5</Badge>
7. </Icon>
8. </Link>
9. </NavRight>
10. </Navbar>
11. <Toolbar tabbar labels bottom>
12. <Link tabLink="#tab-1" tabLinkActive>
13. <Icon ios="f7:envelope_fill" aurora="f7:envelope_fill" md="material:email">
14. <Badge color="green">5</Badge>
15. </Icon>
16. <span class="tabbar-label">Inbox</span>
17. </Link>
18. <Link tabLink="#tab-2">
19. <Icon ios="f7:calendar_fill" aurora="f7:calendar_fill" md="material:today">
20. <Badge color="red">7</Badge>
21. </Icon>
22. <span class="tabbar-label">Calendar</span>
23. </Link>
24. <Link tabLink="#tab-3">
25. <Icon ios="f7:cloud_upload_fill" aurora="f7:cloud_upload_fill" md="material:file_upload">
26. <Badge color="red">1</Badge>
27. </Icon>
28. <span class="tabbar-label">Upload</span>
29. </Link>
30. </Toolbar>

32. <List>
33. <ListItem title="Foo Bar" badge="0"/>
34. <ListItem title="Ivan Petrov" badge="CEO" badgeColor="blue"/>
35. <ListItem title="John Doe" badge="5" badgeColor="green"/>
36. <ListItem title="Jane Doe" badge="NEW" badgeColor="orange"/>
37. </List>
38. </Page>

41. <script>
42. import {Page, Navbar, NavRight, Link, Icon, Badge, Toolbar, List, ListItem} from 'framework7-svelte';
43. </script>

← Appbar

Block / Content Block →