Chip Vue コンポーネント

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

    チップのコンポーネント

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

    • f7-chip (チップ)

    チップのプロパティ

    PropTypeDefaultDescription
    <f7-chip> properties
    textstringチップラベルテキスト
    mediastringチップメディアのテキストコンテンツ
    media-bg-colorstringチップメディア要素の背景色。デフォルトカラーのいずれか。
    media-text-colorstringChip メディア要素のテキストの色。デフォルトカラーのうちの1つ。
    deleteablebooleanfalseChip に "delete" ボタンを追加するかどうかを定義する。
    outlinebooleanfalseチップのアウトライン化
    tooltipstringtooltip のテキストをホバー/プレス時に表示するかどうかを指定します。
    tooltip-triggerstringhoverどのようにしてTooltipを起動するかを定義します。hoverclickmanual`のいずれかです。
    <f7-chip> icon related properties
    icon-sizestring
    number
    アイコンサイズ(px
    icon-colorstringアイコンの色 デフォルトカラーのうちの1つです。
    iconstringカスタムアイコンのクラス
    icon-f7stringF7アイコンのフォントアイコンの名前
    icon-materialstringマテリアルアイコンのフォントアイコンの名称
    icon-iosstringiOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
    icon-mdstringMDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、material:homeなど。
    icon-aurorastringAuroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。

    チップイベント

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

    チップスロット

    Chip Vue コンポーネントには、カスタムエレメント用の追加スロットがあります。

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

    Examples

    <template>
    <f7-page>
      <f7-navbar title="Chips"></f7-navbar>
    
      <f7-block-title>Chips With Text</f7-block-title>
      <f7-block strong>
        <f7-chip text="Example Chip"></f7-chip>
        <f7-chip text="Another Chip"></f7-chip>
        <f7-chip text="One More Chip"></f7-chip>
        <f7-chip text="Fourth Chip"></f7-chip>
        <f7-chip text="Last One"></f7-chip>
      </f7-block>
    
      <f7-block-title>Outline Chips</f7-block-title>
      <f7-block strong>
        <f7-chip outline text="Example Chip"></f7-chip>
        <f7-chip outline text="Another Chip"></f7-chip>
        <f7-chip outline text="One More Chip"></f7-chip>
        <f7-chip outline text="Fourth Chip"></f7-chip>
        <f7-chip outline text="Last One"></f7-chip>
      </f7-block>
    
      <f7-block-title>Icon Chips</f7-block-title>
      <f7-block strong>
        <f7-chip text="Add Contact" media-bg-color="blue">
          <template #media>
            <f7-icon ios="f7:plus_circle" aurora="f7:plus_circle" md="material:add_circle"></f7-icon>
          </template>
        </f7-chip>
        <f7-chip text="London" media-bg-color="green">
          <template #media>
            <f7-icon ios="f7:compass" aurora="f7:compass" md="material:location_on"></f7-icon>
          </template>
        </f7-chip>
        <f7-chip text="John Doe" media-bg-color="red">
          <template #media>
            <f7-icon ios="f7:person" aurora="f7:person" md="material:person"></f7-icon>
          </template>
        </f7-chip>
      </f7-block>
    
      <f7-block-title>Contact Chips</f7-block-title>
      <f7-block strong>
        <f7-chip text="Jane Doe">
          <template #media>
            <img src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"/>
          </template>
        </f7-chip>
        <f7-chip text="John Doe">
          <template #media>
            <img src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"/>
          </template>
        </f7-chip>
        <f7-chip text="Adam Smith">
          <template #media>
            <img src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"/>
          </template>
        </f7-chip>
        <f7-chip text="Jennifer" media-bg-color="pink" media="J"></f7-chip>
        <f7-chip text="Chris" media-bg-color="yellow" media-text-color="black" media="C"></f7-chip>
        <f7-chip text="Kate" media-bg-color="red" media="K"></f7-chip>
      </f7-block>
    
      <f7-block-title>Deletable Chips / Tags</f7-block-title>
      <f7-block strong>
        <f7-chip text="Example Chip" deleteable @click="deleteChip"></f7-chip>
        <f7-chip text="Chris" media="C" media-bg-color="orange" text-color="black" deleteable @click="deleteChip"></f7-chip>
        <f7-chip text="Jane Doe" deleteable @click="deleteChip">
          <template #media>
            <img src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"/>
          </template>
        </f7-chip>
        <f7-chip text="One More Chip" deleteable @click="deleteChip"></f7-chip>
        <f7-chip text="Jennifer" media-bg-color="pink" media="J" deleteable @click="deleteChip"></f7-chip>
        <f7-chip text="Adam Smith" deleteable @click="deleteChip">
          <template #media>
            <img src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"/>
          </template>
        </f7-chip>
      </f7-block>
    
      <f7-block-title>Color Chips</f7-block-title>
      <f7-block strong>
        <f7-chip text="Red Chip" color="red"></f7-chip>
        <f7-chip text="Green Chip" color="green"></f7-chip>
        <f7-chip text="Blue Chip" color="blue"></f7-chip>
        <f7-chip text="Orange Chip" color="orange"></f7-chip>
        <f7-chip text="Pink Chip" color="pink"></f7-chip>
        <f7-chip outline text="Red Chip" color="red"></f7-chip>
        <f7-chip outline text="Green Chip" color="green"></f7-chip>
        <f7-chip outline text="Blue Chip" color="blue"></f7-chip>
        <f7-chip outline text="Orange Chip" color="orange"></f7-chip>
        <f7-chip outline text="Pink Chip" color="pink"></f7-chip>
      </f7-block>
    </f7-page>
    </template>
    
    <script>
    import { f7 } from 'framework7-vue';
    
    export default {
      methods: {
        deleteChip(e) {
          const target = e.target;
          f7.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
            f7.$(target).parents('.chip').remove();
          });
        },
      },
    }
    </script>