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
<!-- 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>
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 |
Event | Description |
---|---|
click | Event will be triggered on Chip click |
delete | Event will be triggered on Chip delete link click |