Badge Svelte Component

Badge Components
Badge Properties
Examples

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

Badge Components

There are following components included:

Badge

Badge Properties

Prop	Type	Default	Description
<Badge> properties
tooltip	string		tooltip text to show on hover/press
tooltipTrigger	string	hover	Defines how to trigger (open) Tooltip. Can be `hover` or `click`. If `hover` tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices

Examples

<Page>
  <Navbar sliding title="Badge">
    <NavRight>
      <Link iconOnly>
        <Icon ios="f7:person_circle_fill" aurora="f7:person_circle_fill" md="material:person">
          <Badge color="red">5</Badge>
        </Icon>
      </Link>
    </NavRight>
  </Navbar>
  <Toolbar tabbar labels bottom>
    <Link tabLink="#tab-1" tabLinkActive>
      <Icon ios="f7:envelope_fill" aurora="f7:envelope_fill" md="material:email">
        <Badge color="green">5</Badge>
      </Icon>
      <span class="tabbar-label">Inbox</span>
    </Link>
    <Link tabLink="#tab-2">
      <Icon ios="f7:calendar_fill" aurora="f7:calendar_fill" md="material:today">
        <Badge color="red">7</Badge>
      </Icon>
      <span class="tabbar-label">Calendar</span>
    </Link>
    <Link tabLink="#tab-3">
      <Icon ios="f7:cloud_upload_fill" aurora="f7:cloud_upload_fill" md="material:file_upload">
        <Badge color="red">1</Badge>
      </Icon>
      <span class="tabbar-label">Upload</span>
    </Link>
  </Toolbar>

  <List>
    <ListItem title="Foo Bar" badge="0"/>
    <ListItem title="Ivan Petrov" badge="CEO" badgeColor="blue"/>
    <ListItem title="John Doe" badge="5" badgeColor="green"/>
    <ListItem title="Jane Doe" badge="NEW" badgeColor="orange"/>
  </List>
</Page>
  

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