List Item

ListItem Props

Name Type Default Description

Name	Type	Default	Description
after	string		Content of the list item "after" area
chevron	boolean	undefined	Enables chevron icon if list item is link. Overwrites `chevronIos` and `chevronMaterial`
chevronIcon	string		Allows to replace default chevron icon with custom one
chevronIos	boolean	true	Enables chevron icon if list item is link in iOS theme
chevronMaterial	boolean	true	Enables chevron icon if list item is link in Material theme
colors	object		Object with Tailwind CSS colors classes
colors.activeBgIos	string	'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'
colors.activeBgMaterial	string	''
colors.groupTitleBgIos	string	'bg-ios-light-surface-variant dark:bg-ios-dark-surface-variant'
colors.groupTitleBgMaterial	string	'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.groupTitleContactsBgIos	string	'dark:bg-[#323234]'
colors.groupTitleContactsBgMaterial	string	'bg-transparent dark:bg-transparent'
colors.groupTitleContactsTextMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.groupTitleСontactsTextIos	string	'text-opacity-90 dark:text-opacity-90'
colors.menuListItemActiveBgIos	string	'bg-primary bg-opacity-15 dark:bg-primary'
colors.menuListItemActiveBgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.menuListItemActiveTextIos	string	'text-primary dark:text-white'
colors.menuListItemActiveTextMaterial	string	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.menuListItemBgIos	string	'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'
colors.menuListItemBgMaterial	string	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.menuListItemTextIos	string	'text-black dark:text-white'
colors.menuListItemTextMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.primaryTextIos	string	'text-black dark:text-white'
colors.primaryTextMaterial	string	'text-md-light-on-surface dark:text-md-dark-on-surface'
colors.secondaryTextIos	string	'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.secondaryTextMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.touchRipple	string	'touch-ripple-black dark:touch-ripple-white'
component	string	'li'	Component's HTML Element
contacts	boolean	undefined	Enables Contacts List by adding required additional classes for styling
contentClass	string		Additional class to add on item "content" element
dividers	boolean	undefined	Renders dividers (borders) between list items. If not specified then inherits `dividers` prop value from parent List component
footer	string		Content of the list item "footer" area
groupTitle	boolean	false	Renders it as a list group title
header	string		Content of the list item "header" area
href	string \| boolean		List item link's `href` attribute
innerClass	string		Additional class to add on item "inner" element
label	boolean	false	Renders item content as `<label>` element. Useful to create radio/checkbox list items
link	boolean	false	Renders list item as link (`<a>`)
linkComponent	string	'a'	List item link HTML Element
linkProps	any		Object with additional props (attributes) to pass to the Link/Button
mediaClass	string		Additional class to add on item "media" element
menuListItem	boolean		Renders list item as menu list item (same as `<MenuListItem>`)
menuListItemActive	boolean	false	Makes menu list item highlighted (active) (same as `<MenuListItem active>`)
strongTitle	boolean \| 'auto'		Makes item title strong (bold). When `'auto'` it will make it strong if there is also `subtitle` or `text` specified
subtitle	string		Content of the list item "subtitle" area
target	string		List item link's `target` attribute
text	string		Content of the list item "text" area
title	string		Content of the list item "title" area
titleFontSizeIos	string	'text-[17px]'	Tailwind CSS class for item title font size in iOS theme
titleFontSizeMaterial	string	'text-[16px]'	Tailwind CSS class for item title font size in Material theme
titleWrapClass	string		Additional class to add on item "titleWrap" element
touchRipple	boolean	true	Enables touch ripple effect in Material theme

after

string

Content of the list item "after" area

chevron

boolean

undefined

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

chevronIcon

string

Allows to replace default chevron icon with custom one

chevronIos

boolean

true

Enables chevron icon if list item is link in iOS theme

chevronMaterial

boolean

true

Enables chevron icon if list item is link in Material theme

colors

object

Object with Tailwind CSS colors classes

colors.activeBgIos

string

'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'

colors.activeBgMaterial

string

colors.groupTitleBgIos

string

'bg-ios-light-surface-variant dark:bg-ios-dark-surface-variant'

colors.groupTitleBgMaterial

string

'bg-md-light-surface-2 dark:bg-md-dark-surface-2'

colors.groupTitleContactsBgIos

string

'dark:bg-[#323234]'

colors.groupTitleContactsBgMaterial

string

'bg-transparent dark:bg-transparent'

colors.groupTitleContactsTextMaterial

string

'text-md-light-primary dark:text-md-dark-primary'

colors.groupTitleСontactsTextIos

string

'text-opacity-90 dark:text-opacity-90'

colors.menuListItemActiveBgIos

string

'bg-primary bg-opacity-15 dark:bg-primary'

colors.menuListItemActiveBgMaterial

string

'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'

colors.menuListItemActiveTextIos

string

'text-primary dark:text-white'

colors.menuListItemActiveTextMaterial

string

'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'

colors.menuListItemBgIos

string

'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10'

colors.menuListItemBgMaterial

string

'bg-md-light-surface-1 dark:bg-md-dark-surface-1'

colors.menuListItemTextIos

string

'text-black dark:text-white'

colors.menuListItemTextMaterial

string

'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

colors.primaryTextIos

string

'text-black dark:text-white'

colors.primaryTextMaterial

string

'text-md-light-on-surface dark:text-md-dark-on-surface'

colors.secondaryTextIos

string

'text-black text-opacity-55 dark:text-white dark:text-opacity-55'

colors.secondaryTextMaterial

string

'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

colors.touchRipple

string

'touch-ripple-black dark:touch-ripple-white'

component

string

'li'

Component's HTML Element

contacts

boolean

undefined

Enables Contacts List by adding required additional classes for styling

contentClass

string

Additional class to add on item "content" element

dividers

boolean

undefined

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

footer

string

Content of the list item "footer" area

groupTitle

boolean

false

Renders it as a list group title

header

string

Content of the list item "header" area

href

string | boolean

List item link's href attribute

innerClass

string

Additional class to add on item "inner" element

label

boolean

false

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

link

boolean

false

Renders list item as link (<a>)

linkComponent

string

'a'

List item link HTML Element

linkProps

any

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

mediaClass

string

Additional class to add on item "media" element

menuListItem

boolean

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

menuListItemActive

boolean

false

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

strongTitle

boolean | 'auto'

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

subtitle

string

Content of the list item "subtitle" area

target

string

List item link's target attribute

text

string

Content of the list item "text" area

title

string

Content of the list item "title" area

titleFontSizeIos

string

'text-[17px]'

Tailwind CSS class for item title font size in iOS theme

titleFontSizeMaterial

string

'text-[16px]'

Tailwind CSS class for item title font size in Material theme

titleWrapClass

string

Additional class to add on item "titleWrap" element

touchRipple

boolean

true

Enables touch ripple effect in Material theme

ListItem Slots

Name	Description
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

Name

Description

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

<template>
  <i-page>
    <i-navbar title="List" />

    <i-block-title>Simple List</i-block-title>
    <i-list>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Strong List</i-block-title>
    <i-list strong>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Strong Outline List</i-block-title>
    <i-list strong outline>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Strong Inset List</i-block-title>
    <i-list strong inset>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Strong Outline Inset List</i-block-title>
    <i-list strong outline inset>
      <i-list-item title="Item 1" />
      <i-list-item title="Item 2" />
      <i-list-item title="Item 3" />
    </i-list>

    <i-block-title>Simple Links List</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item title="Link 1" link />
      <i-list-item title="Link 2" link />
      <i-list-item title="Link 3" link />
    </i-list>

    <i-block-title>Data list, with icons</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item title="Ivan Petrov" after="CEO">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item title="John Doe">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge>5</i-badge>
        </template>
      </i-list-item>
      <i-list-item title="Jenna Smith">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
    </i-list>
    <i-block-title>Links</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item link title="Ivan Petrov" after="CEO">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item link title="John Doe" after="Cleaner">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item link title="Jenna Smith">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
    </i-list>
    <i-block-title>Links, Header, Footer</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item link header="Name" title="John Doe" after="Edit">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item link header="Phone" title="+7 90 111-22-3344" after="Edit">
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item
        link
        header="Email"
        title="john@doe"
        footer="Home"
        after="Edit"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
      <i-list-item
        link
        header="Email"
        title="john@ina-ui"
        footer="Work"
        after="Edit"
      >
        <template #media>
          <demo-icon />
        </template>
      </i-list-item>
    </i-list>

    <i-block-title>Links, no icons</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item link title="Ivan Petrov" />
      <i-list-item link title="John Doe" />
      <i-list-item group-title title="Group title Here" />
      <i-list-item link title="Ivan Petrov" />
      <i-list-item link title="Jenna Smith" />
    </i-list>

    <i-block-title>Grouped with sticky titles</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-group>
        <i-list-item
          title="A"
          group-title
          class="ios:top-11-safe material:top-16-safe sticky"
        />
        <i-list-item title="Aaron " />
        <i-list-item title="Abbie" />
        <i-list-item title="Adam" />
      </i-list-group>
      <i-list-group>
        <i-list-item
          title="B"
          group-title
          class="ios:top-11-safe material:top-16-safe sticky"
        />
        <i-list-item title="Bailey" />
        <i-list-item title="Barclay" />
        <i-list-item title="Bartolo" />
      </i-list-group>
      <i-list-group>
        <i-list-item
          title="C"
          group-title
          class="ios:top-11-safe material:top-16-safe sticky"
        />
        <i-list-item title="Caiden" />
        <i-list-item title="Calvin" />
        <i-list-item title="Candy" />
      </i-list-group>
    </i-list>

    <i-block-title class="text-2xl">Media Lists</i-block-title>
    <i-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>
    </i-block>

    <i-block-title>Songs</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item
        :chevron-material="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."
      >
        <template #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"
          />
        </template>
      </i-list-item>
      <i-list-item
        :chevron-material="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."
      >
        <template #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"
          />
        </template>
      </i-list-item>
      <i-list-item
        :chevron-material="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."
      >
        <template #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"
          />
        </template>
      </i-list-item>
    </i-list>
    <i-block-title>Mail App</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item
        :chevron-material="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."
      />
      <i-list-item
        :chevron-material="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."
      />
      <i-list-item
        :chevron-material="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."
      />
      <i-list-item
        :chevron-material="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."
      />
    </i-list>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBadge,
    iBlock,
    iBlockTitle,
    iList,
    iListGroup,
    iListItem,
  } from 'ina-ui/vue';
  import DemoIcon from '../components/DemoIcon.vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBadge,
      iBlock,
      iBlockTitle,
      iList,
      iListGroup,
      iListItem,
      DemoIcon,
    },

  };
</script>

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Badge,
  Block,
  BlockTitle,
  List,
  ListGroup,
  ListItem,
} from 'ina-ui/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@ina-ui"
          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>
  );
}

PreviousList Input NextMenu List

Last updated 3 months ago