List Item Svelte Component

Contents

List Item Components

There are following components included:

  • ListItem - main list item element

ListItem Props

NameTypeDefaultDescription
afterstring

Content of the list item "after" area

chevronbooleanundefined

Enables chevron icon if list item is link. Overwrites

chevronIconstring

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/10 dark:active:bg-white/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.groupTitleContactsTextIosstring'text-black/90 dark:text-white/90'
colors.groupTitleContactsTextMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.menuListItemActiveBgIosstring'bg-primary/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/10 dark:active:bg-white/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/55 dark:text-white/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

contentClassstring

Additional class to add on item "content" element

dividersbooleanundefined

Renders dividers (borders) between list items. If not specified then inherits

footerstring

Content of the list item "footer" area

groupTitlebooleanfalse

Renders it as a list group title

headerstring

Content of the list item "header" area

innerClassstring

Additional class to add on item "inner" element

labelbooleanfalse

Renders item content as

linkbooleanfalse

Renders list item as link (

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

menuListItemActivebooleanfalse

Makes menu list item highlighted (active) (same as

strongTitleboolean | 'auto'

Makes item title strong (bold). When

subtitlestring

Content of the list item "subtitle" area

targetstring

List item link's

textstring

Content of the list item "text" area

titlestring

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

titleWrapClassstring

Additional class to add on item "titleWrap" element

onClickfunction(e)

ListItem Snippets

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">
    {#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>
    <ListItem
      link
      header="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>
      <ListItem
        title="A"
        groupTitle
        class="ios:top-safe-15 material:top-16-safe sticky"
      />
      <ListItem title="Aaron " />
      <ListItem title="Abbie" />
      <ListItem title="Adam" />
    </ListGroup>
    <ListGroup>
      <ListItem
        title="B"
        groupTitle
        class="ios:top-safe-15 material:top-16-safe sticky"
      />
      <ListItem title="Bailey" />
      <ListItem title="Barclay" />
      <ListItem title="Bartolo" />
    </ListGroup>
    <ListGroup>
      <ListItem
        title="C"
        groupTitle
        class="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 flexible
      layout for visualization of more complex data, like products, services,
      user, etc.
    </p>
  </Block>


  <BlockTitle>Songs</BlockTitle>
  <List strongIos outlineIos>
    <ListItem
      chevronMaterial={false}
      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."
    >
      {#snippet media()}
        <img
          class="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>
    <ListItem
      chevronMaterial={false}
      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."
    >
      {#snippet media()}
        <img
          class="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>
    <ListItem
      chevronMaterial={false}
      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."
    >
      {#snippet media()}
        <img
          class="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>
    <ListItem
      chevronMaterial={false}
      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
      chevronMaterial={false}
      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
      chevronMaterial={false}
      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
      chevronMaterial={false}
      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.
2025 © Konsta UI by nolimits4web.