图标 Svelte 组件

图标组件
图标属性
图标插槽
示例

图标组件

包含以下组件

图标

图标属性

名称	类型	默认值	描述
badge	字符串		图标徽章
badgeColors	对象		徽章颜色。带有 Tailwind CSS 颜色类的对象
badgeColors.bg	字符串	'bg-primary'	徽章背景颜色
badgeColors.text	字符串	'text-white'	徽章文本颜色
ios	字符串		在 "ios" 主题中渲染的图标
material	字符串		在 "material" 主题中渲染的图标

图标插槽

名称	描述
badge	图标徽章
ios	在 "ios" 主题中渲染的图标
material	在 "material" 主题中渲染的图标

示例

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>