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

List React Component

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:

  • To let users navigate through hierarchically structured data
  • To present an indexed list of items
  • To display detail information and controls in visually distinct groupings
  • To present a selectable list of options

List Components

There are following components included:

  • List - main List View element
  • ListGroup - list group element

List Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.outlineIosstring'border-black border-opacity-20 dark:border-white dark:border-opacity-15'
colors.outlineMaterialstring'border-md-light-outline border-md-dark-outline'
colors.strongBgIosstring'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterialstring'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
componentstring'div'

Component's HTML Element

dividersbooleanundefined

Renders dividers (borders) between list items, overwrites dividersIos and dividersMaterial

dividersIosbooleantrue

Renders dividers (borders) between list items in iOS theme

dividersMaterialbooleanfalse

Renders dividers (borders) between list items in Material theme

insetbooleanundefined

Makes list block inset. Overwrites insetIos and insetMaterial

insetIosbooleanfalse

Makes list block inset in iOS theme

insetMaterialbooleanfalse

Makes list block inset in Material theme

marginstring'my-8'

Tailwind CSS margin class

menuListboolean

Renders list as Menu List (same as <MenuList>)

nestedbooleanfalse

Removes hairlines/dividers and margins, useful for case nesting list block within other blocks

outlinebooleanundefined

Renders list outer borders. Overwrites outlineIos and outlineMaterial

outlineIosbooleanfalse

Renders list outer borders in iOS theme

outlineMaterialbooleanfalse

Renders list outer borders in Material theme

strongbooleanundefined

Adds extra highlighting. Overwrites strongIos and strongMaterial

strongIosbooleanfalse

Adds extra highlighting in iOS theme

strongMaterialbooleanfalse

Adds extra highlighting in Material theme

Examples

List.jsx
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>
<Navbar
title="List"
/>
<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 media={<DemoIcon />} title="Ivan Petrov" after="CEO" />
<ListItem
title="John Doe"
media={<DemoIcon />}
after={<Badge>5</Badge>}
/>
<ListItem media={<DemoIcon />} title="Jenna Smith" />
</List>
<BlockTitle>Links</BlockTitle>
<List strongIos outlineIos>
<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 strongIos outlineIos>
<ListItem
media={<DemoIcon />}
link
header="Name"
title="John Doe"
after="Edit"
/>
<ListItem
media={<DemoIcon />}
link
header="Phone"
title="+7 90 111-22-3344"
after="Edit"
/>
<ListItem
link
header="Email"
title="john@doe"
footer="Home"
after="Edit"
media={<DemoIcon />}
/>
<ListItem
link
header="Email"
title="john@konsta"
footer="Work"
after="Edit"
media={<DemoIcon />}
/>
</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>
<ListItem
title="A"
groupTitle
className="ios:top-11-safe material:top-16-safe sticky"
/>
<ListItem title="Aaron " />
<ListItem title="Abbie" />
<ListItem title="Adam" />
</ListGroup>
<ListGroup>
<ListItem
title="B"
groupTitle
className="ios:top-11-safe material:top-16-safe sticky"
/>
<ListItem title="Bailey" />
<ListItem title="Barclay" />
<ListItem title="Bartolo" />
</ListGroup>
<ListGroup>
<ListItem
title="C"
groupTitle
className="ios:top-11-safe material:top-16-safe sticky"
/>
<ListItem title="Caiden" />
<ListItem title="Calvin" />
<ListItem title="Candy" />
</ListGroup>
</List>
<BlockTitle className="text-2xl">Media Lists</BlockTitle>
<Block>
<p>
Media Lists are almost the same as Data Lists, but with a more
flexible layout for visualization of more complex data, like products,
services, user, etc.
</p>
</Block>
<BlockTitle>Songs</BlockTitle>
<List strongIos outlineIos>
<ListItem
link
chevronMaterial={false}
title="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={
<img
className="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"
/>
}
/>
<ListItem
link
chevronMaterial={false}
title="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={
<img
className="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"
/>
}
/>
<ListItem
link
chevronMaterial={false}
title="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={
<img
className="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"
/>
}
/>
</List>
<BlockTitle>Mail App</BlockTitle>
<List strongIos outlineIos>
<ListItem
link
chevronMaterial={false}
title="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."
/>
<ListItem
link
chevronMaterial={false}
title="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."
/>
<ListItem
link
chevronMaterial={false}
title="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."
/>
<ListItem
link
chevronMaterial={false}
title="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>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.