Contacts List - 图1

Contacts List React Component

Contacts List is not a separate component, but just a particular case of using and components.

Contacts List Properties

PropTypeDefaultDescription
<List> properties
contactsListbooleanfalseAdds required additional styles for Contacts List

Examples

  1. export default () => (
  2. <Page>
  3. <Navbar title="Contacts List"></Navbar>
  4. <List contactsList>
  5. <ListGroup>
  6. <ListItem title="A" groupTitle></ListItem>
  7. <ListItem title="Aaron "></ListItem>
  8. <ListItem title="Abbie"></ListItem>
  9. <ListItem title="Adam"></ListItem>
  10. <ListItem title="Adele"></ListItem>
  11. <ListItem title="Agatha"></ListItem>
  12. <ListItem title="Agnes"></ListItem>
  13. <ListItem title="Albert"></ListItem>
  14. <ListItem title="Alexander"></ListItem>
  15. </ListGroup>
  16. <ListGroup>
  17. <ListItem title="B" groupTitle></ListItem>
  18. <ListItem title="Bailey"></ListItem>
  19. <ListItem title="Barclay"></ListItem>
  20. <ListItem title="Bartolo"></ListItem>
  21. <ListItem title="Bellamy"></ListItem>
  22. <ListItem title="Belle"></ListItem>
  23. <ListItem title="Benjamin"></ListItem>
  24. </ListGroup>
  25. <ListGroup>
  26. <ListItem title="C" groupTitle></ListItem>
  27. <ListItem title="Caiden"></ListItem>
  28. <ListItem title="Calvin"></ListItem>
  29. <ListItem title="Candy"></ListItem>
  30. <ListItem title="Carl"></ListItem>
  31. <ListItem title="Cherilyn"></ListItem>
  32. <ListItem title="Chester"></ListItem>
  33. <ListItem title="Chloe"></ListItem>
  34. </ListGroup>
  35. <ListGroup>
  36. <ListItem title="V" groupTitle></ListItem>
  37. <ListItem title="Vladimir"></ListItem>
  38. </ListGroup>
  39. </List>
  40. </Page>
  41. );