Chip Vue 組件

晶片屬性
晶片事件
晶片插槽
範例

晶片 (標籤) Vue 組件在小區塊中表示複雜的實體，例如聯絡人。它們可以包含照片、簡短的標題字串和簡要資訊

晶片組件

包含以下組件

晶片

晶片屬性

名稱	類型	預設值	描述
colors	物件		包含 Tailwind CSS 顏色類別的物件
colors.fillBgIos	字串	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.fillBgMaterial	字串	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.fillTextIos	字串	'text-current'
colors.fillTextMaterial	字串	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.outlineBorderIos	字串	'border-black border-opacity-20 dark:border-white dark:border-opacity-20'
colors.outlineBorderMaterial	字串	'border-md-light-outline dark:border-md-dark-outline'
colors.outlineTextIos	字串	'text-current'
colors.outlineTextMaterial	字串	'text-md-light-on-surface dark:text-md-dark-on-surface'
component	字串	'div'	組件的 HTML 元素
deleteButton	布林值	false	定義晶片是否具有額外的「刪除」按鈕
outline	布林值	false	使晶片呈現外框

晶片事件

名稱	類型	描述
delete	function(e)	在點擊晶片的刪除按鈕時將觸發事件

晶片插槽

名稱	描述
media	晶片媒體區域的內容 (例如圖示)

範例

Chips.vue

<template>
  <k-page>
    <k-navbar title="Chips" />

    <k-block-title>Chips With Text</k-block-title>
    <k-block strong-ios outline-ios>
      <k-chip class="m-0.5">Example Chip</k-chip>
      <k-chip class="m-0.5">Another Chip</k-chip>
      <k-chip class="m-0.5">One More Chip</k-chip>
      <k-chip class="m-0.5">Fourth Chip</k-chip>
      <k-chip class="m-0.5">Last One</k-chip>
    </k-block>

    <k-block-title>Outline Chips</k-block-title>
    <k-block strong-ios outline-ios>
      <k-chip outline class="m-0.5"> Example Chip </k-chip>
      <k-chip outline class="m-0.5"> Another Chip </k-chip>
      <k-chip outline class="m-0.5"> One More Chip </k-chip>
      <k-chip outline class="m-0.5"> Fourth Chip </k-chip>
      <k-chip outline class="m-0.5"> Last One </k-chip>
    </k-block>

    <k-block-title>Contact Chips</k-block-title>
    <k-block strong-ios outline-ios>
      <k-chip class="m-0.5">
        <template #media>
          <img
            alt="avatar"
            class="ios:h-7 material:h-6 rounded-full"
            src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
          />
        </template>
        Jane Doe
      </k-chip>
      <k-chip class="m-0.5">
        <template #media>
          <img
            alt="avatar"
            class="ios:h-7 material:h-6 rounded-full"
            src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
          />
        </template>
        John Doe
      </k-chip>
      <k-chip class="m-0.5">
        <template #media>
          <img
            alt="avatar"
            class="ios:h-7 material:h-6 rounded-full"
            src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
          />
        </template>
        Adam Smith
      </k-chip>
    </k-block>

    <k-block-title>Deletable Chips / Tags</k-block-title>
    <k-block strong-ios outline-ios>
      <k-chip class="m-0.5" delete-button @delete="onDelete">
        Example Chip
      </k-chip>
      <k-chip class="m-0.5" delete-button @delete="onDelete">
        <template #media>
          <img
            alt="avatar"
            class="ios:h-7 material:h-6 rounded-full"
            src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
          />
        </template>
        Adam Smith
      </k-chip>
    </k-block>
    <k-block-title class="bg-b bg-b">Color Chips</k-block-title>
    <k-block strong-ios outline-ios>
      <k-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-red-500', fillText: 'text-white' }"
      >
        Red Chip
      </k-chip>
      <k-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-green-500', fillText: 'text-white' }"
      >
        Green Chip
      </k-chip>
      <k-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-blue-500', fillText: 'text-white' }"
      >
        Blue Chip
      </k-chip>
      <k-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-yellow-500', fillText: 'text-white' }"
      >
        Yellow Chip
      </k-chip>
      <k-chip
        class="m-0.5"
        :colors="{ fillBg: 'bg-pink-500', fillText: 'text-white' }"
      >
        Pink Chip
      </k-chip>
      <k-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-red-500',
          outlineText: 'text-red-500',
        }"
      >
        Red Chip
      </k-chip>
      <k-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-green-500',
          outlineText: 'text-green-500',
        }"
      >
        Green Chip
      </k-chip>
      <k-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-blue-500',
          outlineText: 'text-blue-500',
        }"
      >
        Blue Chip
      </k-chip>
      <k-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-yellow-500',
          outlineText: 'text-yellow-500',
        }"
      >
        Yellow Chip
      </k-chip>
      <k-chip
        class="m-0.5"
        outline
        :colors="{
          outlineBorder: 'border-pink-500',
          outlineText: 'text-pink-500',
        }"
      >
        Pink Chip
      </k-chip>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kChip,
    kBlock,
    kBlockTitle,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kChip,
      kBlock,
      kBlockTitle,
    },
    setup() {
      const onDelete = () => {
        console.log('Delete Chip');
      };
      return {
        onDelete,
      };
    },
  };
</script>