贊助商成為贊助商

晶片 Svelte 元件

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

晶片元件

包含以下元件

晶片屬性

屬性類型預設值說明
<Chip> 屬性
text字串晶片標籤文字
media字串晶片媒體的文字內容
mediaBgColor字串晶片媒體元素背景顏色。其中一個 預設顏色
mediaTextColor字串晶片媒體元素文字顏色。其中一個 預設顏色
deleteable布林值false定義晶片是否具有額外的「刪除」按鈕
outline布林值false使晶片成為輪廓
tooltip字串工具提示 文字，在滑鼠移入/按壓時顯示
tooltipTrigger字串hover定義如何觸發（開啟）工具提示。可以是 hover、click 或 manual
<Chip> 圖示相關屬性
iconSize字串
數字		圖示大小，單位為像素
iconColor字串圖示顏色。其中一個 預設顏色
icon字串自訂圖示類別
iconF7字串F7 圖示字型圖示名稱
iconMaterial字串Material 圖示字型圖示名稱
iconIos字串如果使用 iOS 主題，則會使用的圖示。由圖示系列和圖示名稱組成，中間以冒號分隔，例如 f7:house
iconMd字串如果使用 MD 主題，則會使用的圖示。由圖示系列和圖示名稱組成，中間以冒號分隔，例如 material:home

晶片事件

事件說明
<Chip> 事件
click事件將在晶片按一下時觸發
delete事件將在晶片刪除按鈕按一下時觸發

晶片插槽

晶片 Svelte 元件具有額外的插槽，可供自訂元素使用

範例

chips.svelte
<script>
  import { f7, Navbar, Page, BlockTitle, Chip, Block } from 'framework7-svelte';

  function deleteChip(e) {
    const target = e.target;
    f7.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
      f7.$(target).parents('.chip').remove();
    });
  }
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<Page>
  <Navbar title="Chips" />
  <BlockTitle>Chips With Text</BlockTitle>
  <Block strongIos outlineIos>
    <Chip text="Example Chip" />
    <Chip text="Another Chip" />
    <Chip text="One More Chip" />
    <Chip text="Fourth Chip" />
    <Chip text="Last One" />
  </Block>
  <BlockTitle>Outline Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip outline text="Example Chip" />
    <Chip outline text="Another Chip" />
    <Chip outline text="One More Chip" />
    <Chip outline text="Fourth Chip" />
    <Chip outline text="Last One" />
  </Block>
  <BlockTitle>Icon Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip
      text="Add Contact"
      mediaBgColor="blue"
      iconIos="f7:plus_circle"
      iconMd="material:add_circle"
    />
    <Chip text="London" mediaBgColor="green" iconIos="f7:compass" iconMd="material:location_on" />
    <Chip text="John Doe" mediaBgColor="red" iconIos="f7:person" iconMd="material:person" />
  </Block>
  <BlockTitle>Contact Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip text="Jane Doe">
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
    </Chip>
    <Chip text="John Doe">
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" />
    </Chip>
    <Chip text="Adam Smith">
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
    </Chip>
    <Chip text="Jennifer" mediaBgColor="pink" media="J" />
    <Chip text="Chris" mediaBgColor="yellow" media="C" />
    <Chip text="Kate" mediaBgColor="red" media="K" />
  </Block>
  <BlockTitle>Deletable Chips / Tags</BlockTitle>
  <Block strongIos outlineIos>
    <Chip text="Example Chip" deleteable onDelete={deleteChip} />
    <Chip
      text="Chris"
      media="C"
      mediaBgColor="orange"
      textColor="black"
      deleteable
      onDelete={deleteChip}
    />
    <Chip text="Jane Doe" deleteable onDelete={deleteChip}>
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
    </Chip>
    <Chip text="One More Chip" deleteable onDelete={deleteChip} />
    <Chip text="Jennifer" mediaBgColor="pink" media="J" deleteable onDelete={deleteChip} />
    <Chip text="Adam Smith" deleteable onDelete={deleteChip}>
      <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
    </Chip>
  </Block>
  <BlockTitle>Color Chips</BlockTitle>
  <Block strongIos outlineIos>
    <Chip text="Red Chip" color="red" />
    <Chip text="Green Chip" color="green" />
    <Chip text="Blue Chip" color="blue" />
    <Chip text="Orange Chip" color="orange" />
    <Chip text="Pink Chip" color="pink" />
    <Chip outline text="Red Chip" color="red" />
    <Chip outline text="Green Chip" color="green" />
    <Chip outline text="Blue Chip" color="blue" />
    <Chip outline text="Orange Chip" color="orange" />
    <Chip outline text="Pink Chip" color="pink" />
  </Block>
</Page>
改善此文件
在此頁面