晶片 Svelte 元件

晶片屬性
晶片插槽
範例

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

晶片元件

包含以下元件

晶片

晶片屬性

名稱	類型	預設值	描述
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'
deleteButton	布林值	false	定義晶片是否具有額外的「刪除」按鈕
outline	布林值	false	使晶片具有外框
onDelete	函式(e)		在點擊晶片刪除按鈕時觸發的事件
onClick	函式(e)		`click` 事件處理器

晶片插槽

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

範例

Chips.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Chip,
    Block,
    BlockTitle,
  } from 'konsta/svelte';

</script>

<Page>
  <Navbar title="Chips" />

  <BlockTitle>Chips With Text</BlockTitle>
  <Block strongIos outlineIos>
    <Chip class="m-0.5">Example Chip</Chip>
    <Chip class="m-0.5">Another Chip</Chip>
    <Chip class="m-0.5">One More Chip</Chip>
    <Chip class="m-0.5">Fourth Chip</Chip>
    <Chip class="m-0.5">Last One</Chip>
  </Block>

  <BlockTitle>Outline Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip outline class="m-0.5">Example Chip</Chip>
    <Chip outline class="m-0.5">Another Chip</Chip>
    <Chip outline class="m-0.5">One More Chip</Chip>
    <Chip outline class="m-0.5">Fourth Chip</Chip>
    <Chip outline class="m-0.5">Last One</Chip>
  </Block>

  <BlockTitle>Contact Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip class="m-0.5">
      <img
        slot="media"
        alt="avatar"
        class="ios:h-7 material:h-6 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
      />
      Jane Doe
    </Chip>
    <Chip class="m-0.5">
      <img
        slot="media"
        alt="avatar"
        class="ios:h-7 material:h-6 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
      />
      John Doe
    </Chip>
    <Chip class="m-0.5">
      <img
        slot="media"
        alt="avatar"
        class="ios:h-7 material:h-6 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
      />
      Adam Smith
    </Chip>
  </Block>

  <BlockTitle>Deletable Chips / Tags</BlockTitle>
  <Block strongIos outlineIos>
    <Chip
      class="m-0.5"
      deleteButton
      onDelete={() => console.log('Delete Chip')}
    >
      Example Chip
    </Chip>
    <Chip
      class="m-0.5"
      deleteButton
      onDelete={() => console.log('Delete Chip')}
    >
      <img
        slot="media"
        alt="avatar"
        class="ios:h-7 material:h-6 rounded-full"
        src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
      />
      Adam Smith
    </Chip>
  </Block>
  <BlockTitle class=" bg-b bg-b">Color Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-red-500', fillText: 'text-white' }}
    >
      Red Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-green-500', fillText: 'text-white' }}
    >
      Green Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-blue-500', fillText: 'text-white' }}
    >
      Blue Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-yellow-500', fillText: 'text-white' }}
    >
      Yellow Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-pink-500', fillText: 'text-white' }}
    >
      Pink Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{ outlineBorder: 'border-red-500', outlineText: 'text-red-500' }}
    >
      Red Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-green-500',
        outlineText: 'text-green-500',
      }}
    >
      Green Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-blue-500',
        outlineText: 'text-blue-500',
      }}
    >
      Blue Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-yellow-500',
        outlineText: 'text-yellow-500',
      }}
    >
      Yellow Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-pink-500',
        outlineText: 'text-pink-500',
      }}
    >
      Pink Chip
    </Chip>
  </Block>
</Page>