圖示 Vue 元件

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

圖示元件

包含以下元件

圖示

圖示屬性

名稱	類型	預設值	描述
badge	字串		圖示徽章
badgeColors	物件		徽章顏色。具有 Tailwind CSS 顏色類別的物件
badgeColors.bg	字串	'bg-primary'	徽章背景顏色
badgeColors.text	字串	'text-white'	徽章文字顏色
component	字串	'i'	元件的 HTML 元素
ios	字串		在 "ios" 主題中渲染的圖示
material	字串		在 "material" 主題中渲染的圖示

圖示插槽

名稱	描述
badge	圖示徽章
ios	在 "ios" 主題中渲染的圖示
material	在 "material" 主題中渲染的圖示

範例

Badge.vue

<template>
  <k-page>
    <k-navbar title="Badge">
      
      <template #right>
        <k-link navbar icon-only>
          <k-icon badge="5" :badge-colors="{ bg: 'bg-red-500' }">
            <template #ios><PersonCircleFill class="w-7 h-7" /></template>
            <template #material><MdPerson class="w-6 h-6" /></template>
          </k-icon>
        </k-link>
      </template>
    </k-navbar>
    <k-tabbar labels icons class="left-0 bottom-0 fixed">
      <k-tabbar-link active label="Inbox">
        <template #icon>
          <k-icon badge="5" :badge-colors="{ bg: 'bg-green-500' }">
            <template #ios>
              <EnvelopeFill class="w-7 h-7" />
            </template>
            <template #material>
              <MdEmail class="w-6 h-6" />
            </template>
          </k-icon>
        </template>
      </k-tabbar-link>
      <k-tabbar-link label="Calendar">
        <template #icon>
          <k-icon badge="7" :badge-colors="{ bg: 'bg-red-500' }">
            <template #ios>
              <Calendar class="w-7 h-7" />
            </template>
            <template #material>
              <MdToday class="w-6 h-6" />
            </template>
          </k-icon>
        </template>
      </k-tabbar-link>
      <k-tabbar-link label="Upload">
        <template #icon>
          <k-icon badge="1" :badge-colors="{ bg: 'bg-red-500' }">
            <template #ios>
              <CloudUploadFill class="w-7 h-7" />
            </template>
            <template #material>
              <MdFileUpload class="w-6 h-6" />
            </template>
          </k-icon>
        </template>
      </k-tabbar-link>
    </k-tabbar>
    <k-list strong inset>
      <k-list-item title="Foo Bar">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <k-badge :colors="{ bg: 'bg-gray-500' }">0</k-badge>
        </template>
      </k-list-item>

      <k-list-item title="Ivan Petrov">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <k-badge>CEO</k-badge>
        </template>
      </k-list-item>

      <k-list-item title="John Doe">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <k-badge :colors="{ bg: 'bg-green-500' }">5</k-badge>
        </template>
      </k-list-item>

      <k-list-item title="Jane Doe">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <k-badge :colors="{ bg: 'bg-yellow-500' }">NEW</k-badge>
        </template>
      </k-list-item>
    </k-list>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBadge,
    kIcon,
    kLink,
    kList,
    kListItem,
    kTabbar,
    kTabbarLink,
  } from 'konsta/vue';
  import {
    PersonCircleFill,
    EnvelopeFill,
    Calendar,
    CloudUploadFill,
  } from 'framework7-icons/vue';
  import MdPerson from '../components/MdPerson.vue';
  import MdEmail from '../components/MdEmail.vue';
  import MdToday from '../components/MdToday.vue';
  import MdFileUpload from '../components/MdFileUpload.vue';
  import DemoIcon from '../components/DemoIcon.vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBadge,
      kIcon,
      kLink,
      kList,
      kListItem,
      kTabbar,
      kTabbarLink,

      PersonCircleFill,
      EnvelopeFill,
      Calendar,
      CloudUploadFill,
      MdPerson,
      MdEmail,
      MdToday,
      MdFileUpload,
      DemoIcon,
    },

  };
</script>