List views are versatile and powerful user interface components frequently found in apps. A list view presents data in a scrollable list of multiple rows that may be divided into sections/groups.
List views have many purposes:
There are following components included:
List
- main List View elementListGroup
- list group elementName | Type | Default | Description |
---|---|---|---|
colors | object | Object with Tailwind CSS colors classes | |
colors.outlineIos | string | 'border-black/20 dark:border-white/15' | |
colors.outlineMaterial | string | 'border-md-light-outline border-md-dark-outline' | |
colors.strongBgIos | string | 'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1' | |
colors.strongBgMaterial | string | 'bg-md-light-surface-1 dark:bg-md-dark-surface-1' | |
dividers | boolean | undefined | Renders dividers (borders) between list items, overwrites |
dividersIos | boolean | true | Renders dividers (borders) between list items in iOS theme |
dividersMaterial | boolean | false | Renders dividers (borders) between list items in Material theme |
inset | boolean | undefined | Makes list block inset. Overwrites |
insetIos | boolean | false | Makes list block inset in iOS theme |
insetMaterial | boolean | false | Makes list block inset in Material theme |
menuList | boolean | Renders list as Menu List (same as | |
nested | boolean | false | Removes hairlines/dividers and margins, useful for case nesting list block within other blocks |
outline | boolean | undefined | Renders list outer borders. Overwrites |
outlineIos | boolean | false | Renders list outer borders in iOS theme |
outlineMaterial | boolean | false | Renders list outer borders in Material theme |
strong | boolean | undefined | Adds extra highlighting. Overwrites |
strongIos | boolean | false | Adds extra highlighting in iOS theme |
strongMaterial | boolean | false | Adds extra highlighting in Material theme |
<script>import {Page,Navbar,NavbarBackLink,Badge,Block,BlockTitle,List,ListGroup,ListItem,} from 'konsta/svelte';import DemoIcon from '../components/DemoIcon.svelte';</script><Page><Navbar title="List">{#snippet left()}{#if !isPreview}<NavbarBackLink onclick={() => history.back()} />{/if}{/snippet}</Navbar><BlockTitle>Simple List</BlockTitle><List><ListItem title="Item 1" /><ListItem title="Item 2" /><ListItem title="Item 3" /></List><BlockTitle>Strong List</BlockTitle><List strong><ListItem title="Item 1" /><ListItem title="Item 2" /><ListItem title="Item 3" /></List><BlockTitle>Strong Outline List</BlockTitle><List strong outline><ListItem title="Item 1" /><ListItem title="Item 2" /><ListItem title="Item 3" /></List><BlockTitle>Strong Inset List</BlockTitle><List strong inset><ListItem title="Item 1" /><ListItem title="Item 2" /><ListItem title="Item 3" /></List><BlockTitle>Strong Outline Inset List</BlockTitle><List strong outline inset><ListItem title="Item 1" /><ListItem title="Item 2" /><ListItem title="Item 3" /></List><BlockTitle>Simple Links List</BlockTitle><List strongIos outlineIos><ListItem title="Link 1" link /><ListItem title="Link 2" link /><ListItem title="Link 3" link /></List><BlockTitle>Data list, with icons</BlockTitle><List strongIos outlineIos><ListItem title="Ivan Petrov" after="CEO">{#snippet media()}<DemoIcon />{/snippet}</ListItem><ListItem title="John Doe">{#snippet media()}<DemoIcon />{/snippet}{#snippet after()}<Badge>5</Badge>{/snippet}</ListItem><ListItem title="Jenna Smith">{#snippet media()}<DemoIcon />{/snippet}</ListItem></List><BlockTitle>Links</BlockTitle><List strongIos outlineIos><ListItem link title="Ivan Petrov" after="CEO">{#snippet media()}<DemoIcon />{/snippet}</ListItem><ListItem link title="John Doe" after="Cleaner">{#snippet media()}<DemoIcon />{/snippet}</ListItem><ListItem link title="Jenna Smith">{#snippet media()}<DemoIcon />{/snippet}</ListItem></List><BlockTitle>Links, Header, Footer</BlockTitle><List strongIos outlineIos><ListItem link header="Name" title="John Doe" after="Edit">{#snippet media()}<DemoIcon />{/snippet}</ListItem><ListItem link header="Phone" title="+7 90 111-22-3344" after="Edit">{#snippet media()}<DemoIcon />{/snippet}</ListItem><ListItem link header="Email" title="john@doe" footer="Home" after="Edit">{#snippet media()}<DemoIcon />{/snippet}</ListItem><ListItemlinkheader="Email"title="john@konsta"footer="Work"after="Edit">{#snippet media()}<DemoIcon />{/snippet}</ListItem></List><BlockTitle>Links, no icons</BlockTitle><List strongIos outlineIos><ListItem link title="Ivan Petrov" /><ListItem link title="John Doe" /><ListItem groupTitle title="Group title Here" /><ListItem link title="Ivan Petrov" /><ListItem link title="Jenna Smith" /></List><BlockTitle>Grouped with sticky titles</BlockTitle><List strongIos outlineIos><ListGroup><ListItemtitle="A"groupTitleclass="ios:top-safe-15 material:top-16-safe sticky"/><ListItem title="Aaron " /><ListItem title="Abbie" /><ListItem title="Adam" /></ListGroup><ListGroup><ListItemtitle="B"groupTitleclass="ios:top-safe-15 material:top-16-safe sticky"/><ListItem title="Bailey" /><ListItem title="Barclay" /><ListItem title="Bartolo" /></ListGroup><ListGroup><ListItemtitle="C"groupTitleclass="ios:top-safe-15 material:top-16-safe sticky"/><ListItem title="Caiden" /><ListItem title="Calvin" /><ListItem title="Candy" /></ListGroup></List><BlockTitle class="text-2xl">Media Lists</BlockTitle><Block><p>Media Lists are almost the same as Data Lists, but with a more flexiblelayout for visualization of more complex data, like products, services,user, etc.</p></Block><BlockTitle>Songs</BlockTitle><List strongIos outlineIos><ListItemchevronMaterial={false}linktitle="Yellow Submarine"after="$15"subtitle="Beatles"text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">{#snippet media()}<imgclass="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"width="80"alt="demo"/>{/snippet}</ListItem><ListItemchevronMaterial={false}linktitle="Don't Stop Me Now"after="$22"subtitle="Queen"text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">{#snippet media()}<imgclass="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"width="80"alt="demo"/>{/snippet}</ListItem><ListItemchevronMaterial={false}linktitle="Billie Jean"after="$16"subtitle="Michael Jackson"text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">{#snippet media()}<imgclass="ios:rounded-lg material:rounded-full ios:w-20 material:w-10"src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"width="80"alt="demo"/>{/snippet}</ListItem></List><BlockTitle>Mail App</BlockTitle><List strongIos outlineIos><ListItemchevronMaterial={false}linktitle="Facebook"after="17:14"subtitle="New messages from John Doe"text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."/><ListItemchevronMaterial={false}linktitle="John Doe (via Twitter)"after="17:11"subtitle="John Doe (@_johndoe) mentioned you on Twitter!"text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."/><ListItemchevronMaterial={false}linktitle="Facebook"after="16:48"subtitle="New messages from John Doe"text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."/><ListItemchevronMaterial={false}linktitle="John Doe (via Twitter)"after="15:32"subtitle="John Doe (@_johndoe) mentioned you on Twitter!"text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."/></List></Page>