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 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-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 | |
icon-aurora | string | Icon 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
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 labeldefault
- (same astext
)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>