-
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
Contacts List React Component
Contacts List is not a separate component, but just a particular case of using <List> and <ListItem> components.
Contacts List Properties
Prop | Type | Default | Description |
---|---|---|---|
<List> properties | |||
contactsList | boolean | false | Adds required additional styles for Contacts List |
Examples
export default () => (
<Page>
<Navbar title="Contacts List"></Navbar>
<List contactsList>
<ListGroup>
<ListItem title="A" groupTitle></ListItem>
<ListItem title="Aaron "></ListItem>
<ListItem title="Abbie"></ListItem>
<ListItem title="Adam"></ListItem>
<ListItem title="Adele"></ListItem>
<ListItem title="Agatha"></ListItem>
<ListItem title="Agnes"></ListItem>
<ListItem title="Albert"></ListItem>
<ListItem title="Alexander"></ListItem>
</ListGroup>
<ListGroup>
<ListItem title="B" groupTitle></ListItem>
<ListItem title="Bailey"></ListItem>
<ListItem title="Barclay"></ListItem>
<ListItem title="Bartolo"></ListItem>
<ListItem title="Bellamy"></ListItem>
<ListItem title="Belle"></ListItem>
<ListItem title="Benjamin"></ListItem>
</ListGroup>
<ListGroup>
<ListItem title="C" groupTitle></ListItem>
<ListItem title="Caiden"></ListItem>
<ListItem title="Calvin"></ListItem>
<ListItem title="Candy"></ListItem>
<ListItem title="Carl"></ListItem>
<ListItem title="Cherilyn"></ListItem>
<ListItem title="Chester"></ListItem>
<ListItem title="Chloe"></ListItem>
</ListGroup>
<ListGroup>
<ListItem title="V" groupTitle></ListItem>
<ListItem title="Vladimir"></ListItem>
</ListGroup>
</List>
</Page>
);