Chip Vue Component

Chips (Tags) Vue component represent complex entities in small blocks, such as a contact. They can contain a photo, short title string, and brief information

Chip Components

There are following components included:

  • f7-chip

Chip Properties

PropTypeDefaultDescription
<f7-chip> properties
textstringChip label text
mediastringText content of chip media
media-bg-colorstringChip media element background color. One of the default colors
media-text-colorstringChip media element text color. One of the default colors
deleteablebooleanfalseDefines whether the Chip has additional "delete" button or not
outlinebooleanfalseMakes Chip outline
tooltipstringtooltip text to show on hover/press
tooltip-triggerstringhoverDefines how to trigger (open) Tooltip. Can be hover or click. If hover tooltip will be toggled on mouse hover on desktop, and with tap and hold on touch devices
<f7-chip> icon related properties
icon-sizestring
number
Icon size in px
icon-colorstringIcon color. One of the default colors
iconstringCustom icon class
icon-f7stringName of F7 Icons font icon
icon-materialstringName of Material Icons font icon
icon-iosstringIcon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. f7:house
icon-mdstringIcon to be used in case of MD theme is used. Consists of icon family and icon name divided by colon, e.g. material:home
icon-aurorastringIcon to be used in case of Aurora theme is used. Consists of icon family and icon name divided by colon, e.g. material:home

Chip Events

EventDescription
<f7-chip> events
clickEvent will be triggered on Chip click
deleteEvent will be triggered on Chip delete button click

Chip Slots

Chip Vue component has additional slots for custom elements:

  • text - element will be inserted in place of chip text label
  • default - (same as text)
  • media - element will be inserted in the chip's media element

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">
        <f7-icon slot="media" ios="f7:plus_circle" aurora="f7:plus_circle" md="material:add_circle"></f7-icon>
      </f7-chip>
      <f7-chip text="London" media-bg-color="green">
        <f7-icon slot="media" ios="f7:compass" aurora="f7:compass" md="material:location_on"></f7-icon>
      </f7-chip>
      <f7-chip text="John Doe" media-bg-color="red">
        <f7-icon slot="media" ios="f7:person" aurora="f7:person" md="material:person"></f7-icon>
      </f7-chip>
    </f7-block>

    <f7-block-title>Contact Chips</f7-block-title>
    <f7-block strong>
      <f7-chip text="Jane Doe">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"/>
      </f7-chip>
      <f7-chip text="John Doe">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"/>
      </f7-chip>
      <f7-chip text="Adam Smith">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"/>
      </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">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"/>
      </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">
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"/>
      </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>
  export default {
    methods: {
      deleteChip(e) {
        const $$ = this.$$;
        const app = this.$f7;
        const target = e.target;
        app.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
          $$(target).parents('.chip').remove();
        });
      },
    },
  };
</script>