チップ Svelte コンポーネント

チップス（タグ） Svelte コンポーネントは、連絡先のように小さなブロックで複雑なエンティティを表します。写真、短いタイトルの文字列、および簡単な情報を含めることができます。

チップコンポーネント

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

チップ

チップのプロパティ

プロパティ	型	デフォルト	説明
<Chip> のプロパティ
text	string		チップのラベルテキスト
media	string		チップのメディアのテキストコンテンツ
mediaBgColor	string		チップのメディア要素の背景色。デフォルトカラーのいずれか。
mediaTextColor	string		チップのメディア要素のテキストカラー。デフォルトカラーのいずれか。
deleteable	boolean	false	チップに追加の「削除」ボタンがあるかどうかを定義します。
outline	boolean	false	チップをアウトライン表示にします。
tooltip	string		ホバー/プレス時に表示するツールチップのテキスト。
tooltipTrigger	string	hover	ツールチップをトリガー（開く）する方法を定義します。`hover`、`click`、または`manual`を指定できます。
<Chip> のアイコン関連プロパティ
iconSize	string number		アイコンのサイズ（px）
iconColor	string		アイコンの色。デフォルトカラーのいずれか。
icon	string		カスタムアイコンクラス
iconF7	string		F7 Iconsフォントアイコンの名前
iconMaterial	string		Material Iconsフォントアイコンの名前
iconIos	string		iOSテーマが使用されている場合に利用するアイコン。アイコンファミリとアイコン名をコロンで区切ったもの（例：`f7:house`）で構成されます。
iconMd	string		MDテーマが使用されている場合に利用するアイコン。アイコンファミリとアイコン名をコロンで区切ったもの（例：`material:home`）で構成されます。

チップのイベント

イベント	説明
<Chip> のイベント
click	チップのクリック時にイベントがトリガーされます。
delete	チップの削除ボタンのクリック時にイベントがトリガーされます。

チップのスロット

チップ Svelte コンポーネントには、カスタム要素用の追加スロットがあります。

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

例

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>

このドキュメントを改善する

このページで

チップコンポーネント
チップのプロパティ
チップのイベント
チップのスロット
例