Language: ENCN

Chips 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

Usage example

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

Renders to:

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

Properties

Prop Type Default Description
color string Chip text color. One of default colors
bg string Chip background color. One of default colors
text string Chip label text
media string Content of chip media
media-bg string Chip media element background color. One of default colors
media-color string Chip media element text color. One of default colors
deleteable boolean Defines whether the Chip has additional "delete" link or not

Events

Event Description
click Event will be triggered on Chip click
delete Event will be triggered on Chip delete link click