圖示 Svelte 組件

圖示組件
圖示屬性
圖示插槽
範例

圖示組件

包含以下組件

圖示

圖示屬性

名稱	類型	預設值	描述
徽章	字串		圖示徽章
徽章色彩	物件		徽章色彩。包含 Tailwind CSS 色彩類別的物件
badgeColors.bg	字串	'bg-primary'	徽章背景色彩
badgeColors.text	字串	'text-white'	徽章文字色彩
ios	字串		在 "ios" 主題中渲染的圖示
material	字串		在 "material" 主題中渲染的圖示

圖示插槽

名稱	描述
徽章	圖示徽章
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>