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

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
• media - element will be inserted in the chip's media element

Examples

<!-- Simple Chip -->
<f7-chip text="Example Chip"></f7-chip>

<!-- Colored Chip -->
<f7-chip text="Another Chip" color="red"></f7-chip>

<!-- Media Chip -->
<f7-chip text="Jane Doe" media="J" media-bg-color="red"></f7-chip>

<!-- Deleteable Chip -->
<f7-chip text="Another Chip" deleteable @delete="onChipDelete"></f7-chip>

<!-- Deleteable Media Chip -->
<f7-chip text="Jane Doe" media-bg="red" deleteable @delete="onChipDelete">
  <img slot="media" src="http://lorempixel.com/100/100/people/9/">
</f7-chip>

<!-- With Icon -->
<f7-chip text="Add Contact" color="blue">
  <f7-icon slot="media" f7="add_round"></f7-icon>
</f7-chip>

Renders to:

<!-- Simple Chip -->
<div class="chip">
  <div class="chip-label">Example Chip</div>
</div>

<!-- Colored Chip -->
<div class="chip color-red">
  <div class="chip-label">Another Chip</div>
</div>

<!-- Media Chip -->
<div class="chip bg-color-red">
  <div class="chip-media">J</div>
  <div class="chip-label">Jane Doe</div>
</div>

<!-- Deleteable Chip -->
<div class="chip">
  <div class="chip-label">Another Chip</div>
  <a href="#" class="chip-delete"></a>
</div>

<!-- Deleteable Media Chip -->
<div class="chip">
  <div class="chip-media bg-color-red">
    <img src="http://lorempixel.com/100/100/people/9/">
  </div>
  <div class="chip-label">Jane Doe</div>
  <a href="#" class="chip-delete"></a>
</div>

<!-- With Icon -->
<div class="chip color-blue">
  <div class="chip-media">
    <i class="icon f7-icons">add_round</i>
  </div>
  <div class="chip-label">Add Contact</div>
</div>