List Item Svelte Component

List Item Components

There are following components included:

  • ListItem - main list item element

ListItem Props

NameTypeDefaultDescription
afterstring

Content of the list item "after" area

chevronbooleantrue

Enables chevron icon if list item is link

chevronIconstring

Allows to replace default chevron icon with custom one

colorsobject

Object with Tailwind CSS colors classes

colors.menuListItemActiveBgstring'bg-primary dark:bg-primary'

Active menu list item bg color

colors.menuListItemTextstring'text-primary dark:text-white'

Menu list item text color

colors.textstring'text-black dark:text-white'

List item text color

componentstring'li'

Component's HTML Element

contentClassstring

Additional class to add on item "content" element

dividerbooleanfalse

Renders item as list divider

footerstring

Content of the list item "footer" area

groupTitlebooleanfalse

Renders it as list group title

hairlinesbooleantrue

Renders list item outer hairlines (borders)

headerstring

Content of the list item "header" area

hrefstring | boolean

List item link's href attribute

innerClassstring

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

mediaClassstring

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

subtitlestring

Content of the list item "subtitle" area

targetstring

List item link's target attribute

textstring

Content of the list item "text" area

titlestring

Content of the list item "title" area

titleFontSizeIosstring'text-list-title-ios'

Tailwind CSS class for item title font size in iOS theme

titleFontSizeMaterialstring'text-list-title-material'

Tailwind CSS class for item title font size in Material theme

titleWrapClassstring

Additional class to add on item "titleWrap" element

touchRipplebooleantrue

Enables touch ripple effect in Material theme

onClickfunction(e)

click event handler

ListItem Slots

NameDescription
after

Content of the list item "after" area

content

Content of the item-content

footer

Content of the list item "footer" area

header

Content of the list item "header" area

inner

Content of the item-inner

media

Content of the list item "media" area

subtitle

Content of the list item "subtitle" area

text

Content of the list item "text" area

title

Content of the list item "title" area

Examples

List.svelte
<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" />
<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 title="Ivan Petrov" after="CEO">
<DemoIcon slot="media" />
</ListItem>
<ListItem title="John Doe">
<DemoIcon slot="media" />
<Badge slot="after">5</Badge>
</ListItem>
<ListItem title="Jenna Smith">
<DemoIcon slot="media" />
</ListItem>
</List>
<BlockTitle>Links</BlockTitle>
<List>
<ListItem link title="Ivan Petrov" after="CEO"
><DemoIcon slot="media" /></ListItem
>
<ListItem link title="John Doe" after="Cleaner"
><DemoIcon slot="media" /></ListItem
>
<ListItem link title="Jenna Smith"><DemoIcon slot="media" /></ListItem>
</List>
<BlockTitle>Links, Header, Footer</BlockTitle>
<List>
<ListItem link header="Name" title="John Doe" after="Edit">
<DemoIcon slot="media" />
</ListItem>
<ListItem link header="Phone" title="+7 90 111-22-3344" after="Edit">
<DemoIcon slot="media" />
</ListItem>
<ListItem link header="Email" title="[email protected]" footer="Home" after="Edit">
<DemoIcon slot="media" />
</ListItem>
<ListItem
link
header="Email"
footer="Work"
after="Edit"
>
<DemoIcon slot="media" />
</ListItem>
</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>
<ListItem
title="A"
groupTitle
class="ios:top-11-safe material:top-14-safe"
/>
<ListItem title="Aaron " />
<ListItem title="Abbie" />
<ListItem title="Adam" />
</ListGroup>
<ListGroup>
<ListItem
title="B"
groupTitle
class="ios:top-11-safe material:top-14-safe"
/>
<ListItem title="Bailey" />
<ListItem title="Barclay" />
<ListItem title="Bartolo" />
</ListGroup>
<ListGroup>
<ListItem
title="C"
groupTitle
class="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 class="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>
<ListItem
link
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."
>
<img
slot="media"
src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
width="80"
alt="demo"
/>
</ListItem>
<ListItem
link
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."
>
<img
slot="media"
src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
width="80"
alt="demo"
/>
</ListItem>
<ListItem
link
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."
>
<img
slot="media"
src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
width="80"
alt="demo"
/>
</ListItem>
</List>
<BlockTitle>Mail App</BlockTitle>
<List>
<ListItem
link
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
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
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
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.
2021 © Konsta UI by nolimits4web.