-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Chips 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
Usage example
<!-- Simple Chip -->
<Chip text="Example Chip"></Chip>
<!-- Colored Chip -->
<Chip text="Another Chip" bg="red" color="white"></Chip>
<!-- Media Chip -->
<Chip text="Jane Doe" media='<img src="http://lorempixel.com/100/100/people/9/">'></Chip>
<!-- Deleteable Chip -->
<Chip text="Another Chip" deleteable onDelete={onChipDelete}></Chip>
<!-- Deleteable Media Chip -->
<Chip text="Jane Doe" media='<img src="http://lorempixel.com/100/100/people/9/">' media-bg="red" deleteable onDelete={onChipDelete}></Chip>
Renders to:
<!-- Simple Chip -->
<span class="chip">
<span class="chip-label">Example Chip</span>
</span>
<!-- Colored Chip -->
<span class="chip bg-red color-white">
<span class="chip-label">Another Chip</span>
</span>
<!-- Media Chip -->
<span class="chip bg-red color-white">
<span class="chip-media">
<img src="http://lorempixel.com/100/100/people/9/">
</span>
<span class="chip-label">Jane Doe</span>
</span>
<!-- Deleteable Chip -->
<span class="chip bg-red color-white">
<span class="chip-label">Another Chip</span>
<a href="#" class="chip-delete"></a>
</span>
<!-- Deleteable Media Chip -->
<span class="chip">
<span class="chip-media bg-red">
<img src="http://lorempixel.com/100/100/people/9/">
</span>
<span class="chip-label">Jane Doe</span>
<a href="#" class="chip-delete"></a>
</span>
Properties
Prop | Type | Default | Description |
---|---|---|---|
color | string | Chip text color. One of default colors | |
bg | string | Chip background color. One of default colors | |
text | string | Chip label text | |
media | string | Content of chip media | |
mediaBg | string | Chip media element background color. One of default colors | |
mediaColor | string | Chip media element text color. One of default colors | |
deleteable | boolean | Defines whether the Chip has additional "delete" link or not |
Event Properties
Event | Description |
---|---|
onClick | Event will be triggered on Chip click |
onDelete | Event will be triggered on Chip delete link click |