Chip Vue Component

• Chip Components
• Chip Properties
• Chip Events
• Chip Slots
• Examples

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

Chip Events

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

1. <template>
2. <f7-page>
3. <f7-navbar title="Chips"></f7-navbar>

5. <f7-block-title>Chips With Text</f7-block-title>
6. <f7-block strong>
7. <f7-chip text="Example Chip"></f7-chip>
8. <f7-chip text="Another Chip"></f7-chip>
9. <f7-chip text="One More Chip"></f7-chip>
10. <f7-chip text="Fourth Chip"></f7-chip>
11. <f7-chip text="Last One"></f7-chip>
12. </f7-block>

14. <f7-block-title>Outline Chips</f7-block-title>
15. <f7-block strong>
16. <f7-chip outline text="Example Chip"></f7-chip>
17. <f7-chip outline text="Another Chip"></f7-chip>
18. <f7-chip outline text="One More Chip"></f7-chip>
19. <f7-chip outline text="Fourth Chip"></f7-chip>
20. <f7-chip outline text="Last One"></f7-chip>
21. </f7-block>

23. <f7-block-title>Icon Chips</f7-block-title>
24. <f7-block strong>
25. <f7-chip text="Add Contact" media-bg-color="blue">
26. <f7-icon slot="media" ios="f7:add_round" md="material:add_circle"></f7-icon>
27. </f7-chip>
28. <f7-chip text="London" media-bg-color="green">
29. <f7-icon slot="media" ios="f7:compass" md="material:location_on"></f7-icon>
30. </f7-chip>
31. <f7-chip text="John Doe" media-bg-color="red">
32. <f7-icon slot="media" ios="f7:person" md="material:person"></f7-icon>
33. </f7-chip>
34. </f7-block>

36. <f7-block-title>Contact Chips</f7-block-title>
37. <f7-block strong>
38. <f7-chip text="Jane Doe">
39. <img slot="media" src="http://lorempixel.com/100/100/people/9/"/>
40. </f7-chip>
41. <f7-chip text="John Doe">
42. <img slot="media" src="http://lorempixel.com/100/100/people/3/"/>
43. </f7-chip>
44. <f7-chip text="Adam Smith">
45. <img slot="media" src="http://lorempixel.com/100/100/people/7/"/>
46. </f7-chip>
47. <f7-chip text="Jennifer" media-bg-color="pink" media="J"></f7-chip>
48. <f7-chip text="Chris" media-bg-color="yellow" media-text-color="black" media="C"></f7-chip>
49. <f7-chip text="Kate" media-bg-color="red" media="K"></f7-chip>
50. </f7-block>

52. <f7-block-title>Deletable Chips / Tags</f7-block-title>
53. <f7-block strong>
54. <f7-chip text="Example Chip" deleteable @click="deleteChip"></f7-chip>
55. <f7-chip text="Chris" media="C" media-bg-color="orange" text-color="black" deleteable @click="deleteChip"></f7-chip>
56. <f7-chip text="Jane Doe" deleteable @click="deleteChip">
57. <img slot="media" src="http://lorempixel.com/100/100/people/9/"/>
58. </f7-chip>
59. <f7-chip text="One More Chip" deleteable @click="deleteChip"></f7-chip>
60. <f7-chip text="Jennifer" media-bg-color="pink" media="J" deleteable @click="deleteChip"></f7-chip>
61. <f7-chip text="Adam Smith" deleteable @click="deleteChip">
62. <img slot="media" src="http://lorempixel.com/100/100/people/7/"/>
63. </f7-chip>
64. </f7-block>

66. <f7-block-title>Color Chips</f7-block-title>
67. <f7-block strong>
68. <f7-chip text="Red Chip" color="red"></f7-chip>
69. <f7-chip text="Green Chip" color="green"></f7-chip>
70. <f7-chip text="Blue Chip" color="blue"></f7-chip>
71. <f7-chip text="Orange Chip" color="orange"></f7-chip>
72. <f7-chip text="Pink Chip" color="pink"></f7-chip>
73. <f7-chip outline text="Red Chip" color="red"></f7-chip>
74. <f7-chip outline text="Green Chip" color="green"></f7-chip>
75. <f7-chip outline text="Blue Chip" color="blue"></f7-chip>
76. <f7-chip outline text="Orange Chip" color="orange"></f7-chip>
77. <f7-chip outline text="Pink Chip" color="pink"></f7-chip>
78. </f7-block>
79. </f7-page>
80. </template>
81. <script>
82. export default {
83. methods: {
84. deleteChip(e) {
85. const $$ = this.$$;
86. const app = this.$f7;
87. const target = e.target;
88. app.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
89. $$(target).parents('.chip').remove();
90. });
91. },
92. },
93. };
94. </script>