Contacts List Svelte Component

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

Contacts List Properties

Examples

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

42. <script>
43. import {Page, Navbar, List, ListGroup, ListItem} from 'framework7-svelte';
44. </script>

← Chips / Tags

Floating Action Button / FAB →