🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Contacts List Svelte Component

Contacts List is not a separate component, but just a particular case of using List View (List and List Item Svelte components).

Examples

ContactsList.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
List,
ListGroup,
ListItem,
} from 'konsta/svelte';
</script>
<Page>
<Navbar title="Contacts List" />
<List strongIos>
<ListGroup dividers={false}>
<ListItem title="A" groupTitle contacts />
<ListItem title="Aaron" contacts />
<ListItem title="Abbie" contacts />
<ListItem title="Adam" contacts />
<ListItem title="Adele" contacts />
<ListItem title="Agatha" contacts />
<ListItem title="Agnes" contacts />
<ListItem title="Albert" contacts />
<ListItem title="Alexander" contacts />
</ListGroup>
<ListGroup dividers={false}>
<ListItem title="B" groupTitle contacts />
<ListItem title="Bailey" contacts />
<ListItem title="Barclay" contacts />
<ListItem title="Bartolo" contacts />
<ListItem title="Bellamy" contacts />
<ListItem title="Belle" contacts />
<ListItem title="Benjamin" contacts />
</ListGroup>
<ListGroup dividers={false}>
<ListItem title="C" groupTitle contacts />
<ListItem title="Caiden" contacts />
<ListItem title="Calvin" contacts />
<ListItem title="Candy" contacts />
<ListItem title="Carl" contacts />
<ListItem title="Cherilyn" contacts />
<ListItem title="Chester" contacts />
<ListItem title="Chloe" contacts />
</ListGroup>
<ListGroup dividers={false}>
<ListItem title="V" groupTitle contacts />
<ListItem title="Vladimir" contacts />
</ListGroup>
</List>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.