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

Prop	Type	Default	Description
<f7-chip> properties
text	string		Chip label text
media	string		Text content of chip media
media-bg-color	string		Chip media element background color. One of the default colors
media-text-color	string		Chip media element text color. One of the default colors
deleteable	boolean	false	Defines whether the Chip has additional "delete" button or not
outline	boolean	false	Makes Chip outline
tooltip	string		tooltip text to show on hover/press
tooltip-trigger	string	hover	Defines how to trigger (open) Tooltip. Can be `hover`, `click` or `manual`
<f7-chip> icon related properties
icon-size	string number		Icon size in px
icon-color	string		Icon color. One of the default colors
icon	string		Custom icon class
icon-f7	string		Name of F7 Icons font icon
icon-material	string		Name of Material Icons font icon
icon-ios	string		Icon 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-md	string		Icon to be used in case of MD theme is used. Consists of icon family and icon name divided by colon, e.g. `material:home`

Chip Events

Event	Description
<f7-chip> events
click	Event will be triggered on Chip click
delete	Event 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

chips.vue

<template>
  <f7-page>
    <f7-navbar title="Chips"></f7-navbar>
    <f7-block-title>Chips With Text</f7-block-title>
    <f7-block strong-ios outline-ios>
      <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-ios outline-ios>
      <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-ios outline-ios>
      <f7-chip text="Add Contact" media-bg-color="blue">
        <template #media>
          <f7-icon ios="f7:plus_circle" md="material:add_circle" />
        </template>
      </f7-chip>
      <f7-chip text="London" media-bg-color="green">
        <template #media>
          <f7-icon ios="f7:compass" md="material:location_on" />
        </template>
      </f7-chip>
      <f7-chip text="John Doe" media-bg-color="red">
        <template #media>
          <f7-icon ios="f7:person" md="material:person" />
        </template>
      </f7-chip>
    </f7-block>
    <f7-block-title>Contact Chips</f7-block-title>
    <f7-block strong-ios outline-ios>
      <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-ios outline-ios>
      <f7-chip text="Example Chip" deleteable @delete="deleteChip"></f7-chip>
      <f7-chip
        text="Chris"
        media="C"
        media-bg-color="orange"
        deleteable
        @delete="deleteChip"
      ></f7-chip>
      <f7-chip text="Jane Doe" deleteable @delete="deleteChip">
        <template #media>
          <img src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
        </template>
      </f7-chip>
      <f7-chip text="One More Chip" deleteable @delete="deleteChip"></f7-chip>
      <f7-chip
        text="Jennifer"
        media-bg-color="pink"
        media="J"
        deleteable
        @delete="deleteChip"
      ></f7-chip>
      <f7-chip text="Adam Smith" deleteable @delete="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-ios outline-ios>
      <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 { f7Navbar, f7Page, f7BlockTitle, f7Chip, f7Block, f7Icon, f7 } from 'framework7-vue';
import $ from 'dom7';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Chip,
    f7Block,
    f7Icon,
  },
  methods: {
    deleteChip(e) {
      const target = e.target;
      f7.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
        $(target).parents('.chip').remove();
      });
    },
  },
};
</script>

Improve this Doc

On this page

Chip Components
Chip Properties
Chip Events
Chip Slots
Examples