Chip React Component

Chips (Tags) React 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** / **F7Chip**

Chip Properties

Chip Events

Chip Slots

Chip React 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. export default class extends React.Component {
2. constructor() {
3. super();
4. this.deleteChipBound = this.deleteChip.bind(this);
5. }
6. render() {
7. return (
8. <Page>
9. <Navbar title="Chips"></Navbar>

11. <BlockTitle>Chips With Text</BlockTitle>
12. <Block strong>
13. <Chip text="Example Chip" />
14. <Chip text="Another Chip" />
15. <Chip text="One More Chip" />
16. <Chip text="Fourth Chip" />
17. <Chip text="Last One" />
18. </Block>

20. <BlockTitle>Outline Chips</BlockTitle>
21. <Block strong>
22. <Chip outline text="Example Chip" />
23. <Chip outline text="Another Chip" />
24. <Chip outline text="One More Chip" />
25. <Chip outline text="Fourth Chip" />
26. <Chip outline text="Last One" />
27. </Block>

29. <BlockTitle>Icon Chips</BlockTitle>
30. <Block strong>
31. <Chip text="Add Contact" mediaBgColor="blue">
32. <Icon slot="media" ios="f7:add_round" md="material:add_circle"></Icon>
33. </Chip>
34. <Chip text="London" mediaBgColor="green">
35. <Icon slot="media" ios="f7:compass" md="material:location_on"></Icon>
36. </Chip>
37. <Chip text="John Doe" mediaBgColor="red">
38. <Icon slot="media" ios="f7:person" md="material:person"></Icon>
39. </Chip>
40. </Block>

42. <BlockTitle>Contact Chips</BlockTitle>
43. <Block strong>
44. <Chip text="Jane Doe">
45. <img slot="media" src="http://lorempixel.com/100/100/people/9/" />
46. </Chip>
47. <Chip text="John Doe">
48. <img slot="media" src="http://lorempixel.com/100/100/people/3/" />
49. </Chip>
50. <Chip text="Adam Smith">
51. <img slot="media" src="http://lorempixel.com/100/100/people/7/" />
52. </Chip>
53. <Chip text="Jennifer" mediaBgColor="pink" media="J" />
54. <Chip text="Chris" mediaBgColor="yellow" mediaTextColor="black" media="C" />
55. <Chip text="Kate" mediaBgColor="red" media="K" />
56. </Block>

58. <BlockTitle>Deletable Chips / Tags</BlockTitle>
59. <Block strong>
60. <Chip text="Example Chip" deleteable onClick={ this.deleteChipBound } />
61. <Chip text="Chris" media="C" mediaBgColor="orange" textColor="black" deleteable onClick={ this.deleteChipBound } />
62. <Chip text="Jane Doe" deleteable onClick={ this.deleteChipBound }>
63. <img slot="media" src="http://lorempixel.com/100/100/people/9/"/>
64. </Chip>
65. <Chip text="One More Chip" deleteable onClick={ this.deleteChipBound } />
66. <Chip text="Jennifer" mediaBgColor="pink" media="J" deleteable onClick={ this.deleteChipBound } />
67. <Chip text="Adam Smith" deleteable onClick={ this.deleteChipBound }>
68. <img slot="media" src="http://lorempixel.com/100/100/people/7/"/>
69. </Chip>
70. </Block>

72. <BlockTitle>Color Chips</BlockTitle>
73. <Block strong>
74. <Chip text="Red Chip" color="red" />
75. <Chip text="Green Chip" color="green" />
76. <Chip text="Blue Chip" color="blue" />
77. <Chip text="Orange Chip" color="orange" />
78. <Chip text="Pink Chip" color="pink" />
79. <Chip outline text="Red Chip" color="red" />
80. <Chip outline text="Green Chip" color="green" />
81. <Chip outline text="Blue Chip" color="blue" />
82. <Chip outline text="Orange Chip" color="orange" />
83. <Chip outline text="Pink Chip" color="pink" />
84. </Block>
85. </Page>
86. )
87. }
88. deleteChip(e) {
89. const $$ = this.$$;
90. const app = this.$f7;
91. const target = e.target;
92. app.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
93. $$(target).parents('.chip').remove();
94. });
95. }
96. }