Badge Svelte 组件

Badge 组件
Badge 属性
示例

Badge Svelte 组件代表 Badge 元素，可以用于列表、链接、导航栏等。

Badge 组件

以下组件包含在内：

徽章

Badge 属性

名称	类型	默认值	描述
colors	对象		带有 Tailwind CSS 颜色类的对象
colors.bg	字符串	'bg-primary'	Badge 背景颜色
colors.text	字符串	'text-white'	Badge 文本颜色
small	布尔值		创建小型 Badge
onClick	function(e)		`click` 事件处理程序

示例

Badge.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Badge,
    Icon,
    Link,
    List,
    ListItem,
    Tabbar,
    TabbarLink,
  } from 'konsta/svelte';
  import {
    PersonCircleFill,
    EnvelopeFill,
    Calendar,
    CloudUploadFill,
  } from 'framework7-icons/svelte';
  import MdPerson from '../components/MdPerson.svelte';
  import MdEmail from '../components/MdEmail.svelte';
  import MdToday from '../components/MdToday.svelte';
  import MdFileUpload from '../components/MdFileUpload.svelte';
  import DemoIcon from '../components/DemoIcon.svelte';

</script>

<Page>
  <Navbar title="Badge">
    <Link navbar iconOnly slot="right">
      <Icon badge="5" badgeColors={{ bg: 'bg-red-500' }}>
        <PersonCircleFill slot="ios" class="w-7 h-7" />
        <MdPerson slot="material" class="w-6 h-6" />
      </Icon>
    </Link>
  </Navbar>

  <Tabbar labels icons class="left-0 bottom-0 fixed">
    <TabbarLink active label="Inbox">
      <Icon slot="icon" badge="5" badgeColors={{ bg: 'bg-green-500' }}>
        <EnvelopeFill slot="ios" class="w-7 h-7" />
        <MdEmail slot="material" class="w-6 h-6" />
      </Icon>
    </TabbarLink>
    <TabbarLink label="Calendar">
      <Icon slot="icon" badge="7" badgeColors={{ bg: 'bg-red-500' }}>
        <Calendar slot="ios" class="w-7 h-7" />
        <MdToday slot="material" class="w-6 h-6" />
      </Icon>
    </TabbarLink>
    <TabbarLink label="Upload">
      <Icon slot="icon" badge="1" badgeColors={{ bg: 'bg-red-500' }}>
        <CloudUploadFill slot="ios" class="w-7 h-7" />
        <MdFileUpload slot="material" class="w-6 h-6" />
      </Icon>
    </TabbarLink>
  </Tabbar>
  <List strong inset>
    <ListItem title="Foo Bar">
      <DemoIcon slot="media" />
      <Badge slot="after" colors={{ bg: 'bg-gray-500' }}>0</Badge>
    </ListItem>

    <ListItem title="Ivan Petrov">
      <DemoIcon slot="media" />
      <Badge slot="after">CEO</Badge>
    </ListItem>

    <ListItem title="John Doe">
      <DemoIcon slot="media" />
      <Badge slot="after" colors={{ bg: 'bg-green-500' }}>5</Badge>
    </ListItem>

    <ListItem title="Jane Doe">
      <DemoIcon slot="media" />
      <Badge slot="after" colors={{ bg: 'bg-yellow-500' }}>NEW</Badge>
    </ListItem>
  </List>
</Page>