Badge - 图1

Badge React Component

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

Badge Components

There are following components included:

  • Badge / F7Badge

Examples

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

← Appbar

Block / Content Block →