-
Get Started
-
Vue Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List
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 Card outline |
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 labelmedia
- 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:add_round" md="material:add_circle"></f7-icon>
</f7-chip>
<f7-chip text="London" media-bg-color="green">
<f7-icon slot="media" ios="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" 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="http://lorempixel.com/100/100/people/9/"/>
</f7-chip>
<f7-chip text="John Doe">
<img slot="media" src="http://lorempixel.com/100/100/people/3/"/>
</f7-chip>
<f7-chip text="Adam Smith">
<img slot="media" src="http://lorempixel.com/100/100/people/7/"/>
</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="http://lorempixel.com/100/100/people/9/"/>
</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="http://lorempixel.com/100/100/people/7/"/>
</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>