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.bg | string | 'bg-block-strong-light dark:bg-block-strong-dark' | List bg color |
component | string | 'div' | Component's HTML Element |
hairlines | boolean | true | Renders outer hairlines (borders) |
inset | boolean | false | Makes list block inset |
margin | string | 'my-8' | Tailwind CSS margin class |
menuList | boolean | Renders list as Menu List (same as | |
nested | boolean | false | Removes hairlines and margins, useful for case nesting list block within other blocks |
import React from 'react';import {Page,Navbar,NavbarBackLink,Badge,Block,BlockTitle,List,ListGroup,ListItem,} from 'konsta/react';import DemoIcon from '../components/DemoIcon';export default function ListPage() {return (<Page><Navbartitle="List"/><BlockTitle>Simple List</BlockTitle><List><ListItem title="Item 1" /><ListItem title="Item 2" /><ListItem title="Item 3" /></List><BlockTitle>Simple Links List</BlockTitle><List><ListItem title="Link 1" link /><ListItem title="Link 2" link /><ListItem title="Link 3" link /></List><BlockTitle>Data list, with icons</BlockTitle><List><ListItem media={<DemoIcon />} title="Ivan Petrov" after="CEO" /><ListItemtitle="John Doe"media={<DemoIcon />}after={<Badge>5</Badge>}/><ListItem media={<DemoIcon />} title="Jenna Smith" /></List><BlockTitle>Links</BlockTitle><List><ListItem media={<DemoIcon />} link title="Ivan Petrov" after="CEO" /><ListItem media={<DemoIcon />} link title="John Doe" after="Cleaner" /><ListItem media={<DemoIcon />} link title="Jenna Smith" /></List><BlockTitle>Links, Header, Footer</BlockTitle><List><ListItemmedia={<DemoIcon />}linkheader="Name"title="John Doe"after="Edit"/><ListItemmedia={<DemoIcon />}linkheader="Phone"title="+7 90 111-22-3344"after="Edit"/><ListItemlinkheader="Email"footer="Home"after="Edit"media={<DemoIcon />}/><ListItemlinkheader="Email"footer="Work"after="Edit"media={<DemoIcon />}/></List><BlockTitle>Links, no icons</BlockTitle><List><ListItem link title="Ivan Petrov" /><ListItem link title="John Doe" /><ListItem divider title="Divider Here" /><ListItem link title="Ivan Petrov" /><ListItem link title="Jenna Smith" /></List><BlockTitle>Grouped with sticky titles</BlockTitle><List><ListGroup><ListItemtitle="A"groupTitleclassName="ios:top-11-safe material:top-14-safe"/><ListItem title="Aaron " /><ListItem title="Abbie" /><ListItem title="Adam" /></ListGroup><ListGroup><ListItemtitle="B"groupTitleclassName="ios:top-11-safe material:top-14-safe"/><ListItem title="Bailey" /><ListItem title="Barclay" /><ListItem title="Bartolo" /></ListGroup><ListGroup><ListItemtitle="C"groupTitleclassName="ios:top-11-safe material:top-14-safe"/><ListItem title="Caiden" /><ListItem title="Calvin" /><ListItem title="Candy" /></ListGroup></List><BlockTitle>Inset List</BlockTitle><List inset><ListItem title="Item 1" /><ListItem title="Item 2" /><ListItem title="Item 3" /></List><BlockTitle className="text-2xl">Media Lists</BlockTitle><Block><p>Media Lists are almost the same as Data Lists, but with a moreflexible layout for visualization of more complex data, like products,services, user, etc.</p></Block><BlockTitle>Songs</BlockTitle><List><ListItemlinktitle="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."media={<imgsrc="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"width="80"alt="demo"/>}/><ListItemlinktitle="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."media={<imgsrc="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"width="80"alt="demo"/>}/><ListItemlinktitle="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."media={<imgsrc="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"width="80"alt="demo"/>}/></List><BlockTitle>Mail App</BlockTitle><List><ListItemlinktitle="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."/><ListItemlinktitle="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."/><ListItemlinktitle="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."/><ListItemlinktitle="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>);}