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

List Item React Component

List Item Components

There are following components included:

  • ListItem - main list item element

ListItem Props

NameTypeDefaultDescription
afterReactNode

Content of the list item "after" area

chevronbooleanundefined

Enables chevron icon if list item is link. Overwrites chevronIos and chevronMaterial

chevronIconReactNode

Allows to replace default chevron icon with custom one

chevronIosbooleantrue

Enables chevron icon if list item is link in iOS theme

chevronMaterialbooleantrue

Enables chevron icon if list item is link in Material theme

colorsobject

Object with Tailwind CSS colors classes

colors.activeBgIosstring'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'
colors.activeBgMaterialstring''
colors.groupTitleBgIosstring'bg-ios-light-surface-variant dark:bg-ios-dark-surface-variant'
colors.groupTitleBgMaterialstring'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.groupTitleContactsBgIosstring'dark:bg-[#323234]'
colors.groupTitleContactsBgMaterialstring'bg-transparent dark:bg-transparent'
colors.groupTitleContactsTextMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.groupTitleСontactsTextIosstring'text-opacity-90 dark:text-opacity-90'
colors.menuListItemActiveBgIosstring'bg-primary bg-opacity-15 dark:bg-primary'
colors.menuListItemActiveBgMaterialstring'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.menuListItemActiveTextIosstring'text-primary dark:text-white'
colors.menuListItemActiveTextMaterialstring'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.menuListItemBgIosstring'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'
colors.menuListItemBgMaterialstring'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.menuListItemTextIosstring'text-black dark:text-white'
colors.menuListItemTextMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.primaryTextIosstring'text-black dark:text-white'
colors.primaryTextMaterialstring'text-md-light-on-surface dark:text-md-dark-on-surface'
colors.secondaryTextIosstring'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.secondaryTextMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.touchRipplestring'touch-ripple-black dark:touch-ripple-white'
componentstring'li'

Component's HTML Element

contactsbooleanundefined

Enables Contacts List by adding required additional classes for styling

contentChildrenReactNode

Content of the item-content

contentClassNamestring

Additional class to add on item "content" element

dividersbooleanundefined

Renders dividers (borders) between list items. If not specified then inherits dividers prop value from parent List component

footerReactNode

Content of the list item "footer" area

groupTitlebooleanfalse

Renders it as a list group title

headerReactNode

Content of the list item "header" area

hrefstring | boolean

List item link's href attribute

innerChildrenReactNode

Content of the item-inner

innerClassNamestring

Additional class to add on item "inner" element

labelbooleanfalse

Renders item content as <label> element. Useful to create radio/checkbox list items

linkbooleanfalse

Renders list item as link (<a>)

linkComponentstring'a'

List item link HTML Element

linkPropsany

Object with additional props (attributes) to pass to the Link/Button

mediaReactNode

Content of the list item "media" area

mediaClassNamestring

Additional class to add on item "media" element

menuListItemboolean

Renders list item as menu list item (same as <MenuListItem>)

menuListItemActivebooleanfalse

Makes menu list item highlighted (active) (same as <MenuListItem active>)

strongTitleboolean | 'auto'

Makes item title strong (bold). When 'auto' it will make it strong if there is also subtitle or text specified

subtitleReactNode

Content of the list item "subtitle" area

targetstring

List item link's target attribute

textReactNode

Content of the list item "text" area

titleReactNode

Content of the list item "title" area

titleFontSizeIosstring'text-[17px]'

Tailwind CSS class for item title font size in iOS theme

titleFontSizeMaterialstring'text-[16px]'

Tailwind CSS class for item title font size in Material theme

titleWrapClassNamestring

Additional class to add on item "titleWrap" element

touchRipplebooleantrue

Enables touch ripple effect 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.