チップスSvelteコンポーネント

Chips (Tags) Svelteコンポーネントは、連絡先のような複雑なエンティティを小さなブロックで表現します。写真、短いタイトル文字列、簡単な情報を含むことができます。

チップのコンポーネント

以下のコンポーネントが含まれています。

Chip（チップ

チップのプロパティ

Prop	Type	Default	Description
<Chip> properties
text	string		チップラベルテキスト
media	string		チップメディアのテキストコンテンツ
mediaBgColor	string		チップメディア要素の背景色。デフォルトカラーのいずれか。
mediaTextColor	string		Chip メディア要素のテキストの色。デフォルトの色のいずれか。
deleteable	boolean	false	Chip に "delete" ボタンを追加するかどうかを定義する。
outline	boolean	false	チップのアウトライン化
tooltip	string		tooltip のテキストをホバー/プレス時に表示するかどうかを指定します。
tooltipTrigger	string	hover	どのようにしてTooltipを起動するかを定義します。hover`、`click`、`manual`のいずれかです。
<Chip> icon related properties
iconSize	string number		アイコンサイズ(px)
iconColor	string		アイコンの色デフォルトカラーのうちの1つです。
icon	string		カスタムアイコンのクラス
iconF7	string		F7アイコンのフォントアイコンの名前
iconMaterial	string		マテリアルアイコンのフォントアイコンの名称
iconIos	string		iOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
iconMd	string		MDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、`material:home`など。
iconAurora	string		Auroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。

チップイベント

Event	Description
<Chip> events
click	チップがクリックされると、イベントが発生します。
delete	チップの削除ボタンがクリックされると、イベントが発生します。

チップスロット

Chip Svelteコンポーネントには、カスタムエレメント用のスロットが追加されています。

text - チップのテキストラベルの代わりに要素が挿入されます。
default - (text と同じ)
media - チップのメディア要素に挿入される要素です。

Examples

<Page>
  <Navbar title="Chips"></Navbar>
  <BlockTitle>Chips With Text</BlockTitle>
  <Block strong>
    <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 strong>
    <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 strong>
    <Chip text="Add Contact" mediaBgColor="blue" iconIos="f7:plus_circle" iconAurora="f7:plus_circle" iconMd="material:add_circle" />
    <Chip text="London" mediaBgColor="green" iconIos="f7:compass" iconAurora="f7:compass" iconMd="material:location_on" />
    <Chip text="John Doe" mediaBgColor="red" iconIos="f7:person" iconAurora="f7:person" iconMd="material:person" />
  </Block>
  <BlockTitle>Contact Chips</BlockTitle>
  <Block strong>
    <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" mediaTextColor="black" media="C" />
    <Chip text="Kate" mediaBgColor="red" media="K" />
  </Block>
  <BlockTitle>Deletable Chips / Tags</BlockTitle>
  <Block strong>
    <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 strong>
    <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>
  


<script>
  import {f7, Page, Navbar, BlockTitle, Block, Chip, Icon} 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>