Chip Svelte Component

Chips (Tags) Svelte 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:

• Chip

Chip Properties

Chip Events

Chip Slots

Chip Svelte 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. <Page>
2. <Navbar title="Chips"></Navbar>
3. <BlockTitle>Chips With Text</BlockTitle>
4. <Block strong>
5. <Chip text="Example Chip" />
6. <Chip text="Another Chip" />
7. <Chip text="One More Chip" />
8. <Chip text="Fourth Chip" />
9. <Chip text="Last One" />
10. </Block>
11. <BlockTitle>Outline Chips</BlockTitle>
12. <Block strong>
13. <Chip outline text="Example Chip" />
14. <Chip outline text="Another Chip" />
15. <Chip outline text="One More Chip" />
16. <Chip outline text="Fourth Chip" />
17. <Chip outline text="Last One" />
18. </Block>
19. <BlockTitle>Icon Chips</BlockTitle>
20. <Block strong>
21. <Chip text="Add Contact" mediaBgColor="blue" iconIos="f7:plus_circle" iconAurora="f7:plus_circle" iconMd="material:add_circle" />
22. <Chip text="London" mediaBgColor="green" iconIos="f7:compass" iconAurora="f7:compass" iconMd="material:location_on" />
23. <Chip text="John Doe" mediaBgColor="red" iconIos="f7:person" iconAurora="f7:person" iconMd="material:person" />
24. </Block>
25. <BlockTitle>Contact Chips</BlockTitle>
26. <Block strong>
27. <Chip text="Jane Doe">
28. <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
29. </Chip>
30. <Chip text="John Doe">
31. <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" />
32. </Chip>
33. <Chip text="Adam Smith">
34. <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
35. </Chip>
36. <Chip text="Jennifer" mediaBgColor="pink" media="J" />
37. <Chip text="Chris" mediaBgColor="yellow" mediaTextColor="black" media="C" />
38. <Chip text="Kate" mediaBgColor="red" media="K" />
39. </Block>
40. <BlockTitle>Deletable Chips / Tags</BlockTitle>
41. <Block strong>
42. <Chip text="Example Chip" deleteable onDelete={deleteChip} />
43. <Chip text="Chris" media="C" mediaBgColor="orange" textColor="black" deleteable onDelete={deleteChip} />
44. <Chip text="Jane Doe" deleteable onDelete={deleteChip}>
45. <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"/>
46. </Chip>
47. <Chip text="One More Chip" deleteable onDelete={deleteChip} />
48. <Chip text="Jennifer" mediaBgColor="pink" media="J" deleteable onDelete={deleteChip} />
49. <Chip text="Adam Smith" deleteable onDelete={deleteChip}>
50. <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"/>
51. </Chip>
52. </Block>
53. <BlockTitle>Color Chips</BlockTitle>
54. <Block strong>
55. <Chip text="Red Chip" color="red" />
56. <Chip text="Green Chip" color="green" />
57. <Chip text="Blue Chip" color="blue" />
58. <Chip text="Orange Chip" color="orange" />
59. <Chip text="Pink Chip" color="pink" />
60. <Chip outline text="Red Chip" color="red" />
61. <Chip outline text="Green Chip" color="green" />
62. <Chip outline text="Blue Chip" color="blue" />
63. <Chip outline text="Orange Chip" color="orange" />
64. <Chip outline text="Pink Chip" color="pink" />
65. </Block>
66. </Page>

70. <script>
71. import {f7, Page, Navbar, BlockTitle, Block, Chip, Icon} from 'framework7-svelte';

73. function deleteChip(e) {
74. const target = e.target;
75. f7.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
76. f7.$(target).parents('.chip').remove();
77. });
78. }
79. </script>

← Checkbox

Contacts List →