-
Get Started
-
React 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 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
Prop | Type | Default | Description |
---|---|---|---|
<Chip> properties | |||
text | string | Chip label text | |
media | string | Text content of chip media | |
mediaBgColor | string | Chip media element background color. One of the default colors | |
mediaTextColor | 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 |
---|---|
<Chip> events | |
click | Event will be triggered on Chip click |
delete | Event will be triggered on Chip delete button click |
Chip Slots
Chip React 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
export default class extends React.Component {
constructor() {
super();
this.deleteChipBound = this.deleteChip.bind(this);
}
render() {
return (
<Page>
<Navbar title="Chips"></Navbar>
<BlockTitle>Chips With Text</BlockTitle>
<Block strong>
<Chip text="Example Chip" />
<Chip text="Another Chip" />
<Chip text="One More Chip" />
<Chip text="Fourth Chip" />
<Chip text="Last One" />
</Block>
<BlockTitle>Outline Chips</BlockTitle>
<Block strong>
<Chip outline text="Example Chip" />
<Chip outline text="Another Chip" />
<Chip outline text="One More Chip" />
<Chip outline text="Fourth Chip" />
<Chip outline text="Last One" />
</Block>
<BlockTitle>Icon Chips</BlockTitle>
<Block strong>
<Chip text="Add Contact" mediaBgColor="blue">
<Icon slot="media" ios="f7:add_round" md="material:add_circle"></Icon>
</Chip>
<Chip text="London" mediaBgColor="green">
<Icon slot="media" ios="f7:compass" md="material:location_on"></Icon>
</Chip>
<Chip text="John Doe" mediaBgColor="red">
<Icon slot="media" ios="f7:person" md="material:person"></Icon>
</Chip>
</Block>
<BlockTitle>Contact Chips</BlockTitle>
<Block strong>
<Chip text="Jane Doe">
<img slot="media" src="http://lorempixel.com/100/100/people/9/" />
</Chip>
<Chip text="John Doe">
<img slot="media" src="http://lorempixel.com/100/100/people/3/" />
</Chip>
<Chip text="Adam Smith">
<img slot="media" src="http://lorempixel.com/100/100/people/7/" />
</Chip>
<Chip text="Jennifer" mediaBgColor="pink" media="J" />
<Chip text="Chris" mediaBgColor="yellow" mediaTextColor="black" media="C" />
<Chip text="Kate" mediaBgColor="red" media="K" />
</Block>
<BlockTitle>Deletable Chips / Tags</BlockTitle>
<Block strong>
<Chip text="Example Chip" deleteable onClick={ this.deleteChipBound } />
<Chip text="Chris" media="C" mediaBgColor="orange" textColor="black" deleteable onClick={ this.deleteChipBound } />
<Chip text="Jane Doe" deleteable onClick={ this.deleteChipBound }>
<img slot="media" src="http://lorempixel.com/100/100/people/9/"/>
</Chip>
<Chip text="One More Chip" deleteable onClick={ this.deleteChipBound } />
<Chip text="Jennifer" mediaBgColor="pink" media="J" deleteable onClick={ this.deleteChipBound } />
<Chip text="Adam Smith" deleteable onClick={ this.deleteChipBound }>
<img slot="media" src="http://lorempixel.com/100/100/people/7/"/>
</Chip>
</Block>
<BlockTitle>Color Chips</BlockTitle>
<Block strong>
<Chip text="Red Chip" color="red" />
<Chip text="Green Chip" color="green" />
<Chip text="Blue Chip" color="blue" />
<Chip text="Orange Chip" color="orange" />
<Chip text="Pink Chip" color="pink" />
<Chip outline text="Red Chip" color="red" />
<Chip outline text="Green Chip" color="green" />
<Chip outline text="Blue Chip" color="blue" />
<Chip outline text="Orange Chip" color="orange" />
<Chip outline text="Pink Chip" color="pink" />
</Block>
</Page>
)
}
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();
});
}
}