List View - 图1

List Svelte Component

List views are versatile and powerful user interface compontents frequently found in iOS 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 Svelte component represents Framework7’s List View component.

List Components

There are following components included:

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

List Properties

PropTypeDefaultDescription
<List> properties
ulbooleantrueWraps children with <ul>. Recommended to disable used with nested <ListGroup>
insetbooleanfalseMakes list block inset
xsmallInsetbooleanMakes block inset when app width >= 480px
smallInsetbooleanMakes block inset when app width >= 568px
mediumInsetbooleanMakes block inset when app width >= 768px
largeInsetbooleanMakes block inset when app width >= 1024px
xlargeInsetbooleanMakes block inset when app width >= 1200px
mediaListbooleanfalseEnables Media List
linksListbooleanfalseEnables simplified Links List
simpleListbooleanfalseEnables simplified Simple List
sortablebooleanfalseEnables Sortable List
sortableOppositebooleanfalseRenders sortable handler on opposite side (on left in LTR)
sortableTapHoldbooleanfalseMakes list items sortable on item tap and hold (long press). In this case app will rely on custom taphold event. To make it work correctly, make sure you have also enabled touch.tapHold: true app parameter
sortableEnabledbooleanfalseEnables sorting on sortable list
sortableMoveElementsbooleanWhen passed it will overwrite same sortable.moveElements global app parameter.
accordionbooleanfalseEnables Accordion List
accordionOppositebooleanfalseRenders accordion chevron icon on opposite side (on left in LTR)
contactsListbooleanfalseEnables Contacts List by adding required addional classes for styling
formbooleanfalseEnables <form> tag on list block instead of <div>
formStoreDatabooleanfalseEnables form storage for the current form
inlineLabelsbooleanfalseEnables inline-styled labels for Form Inputs
noChevronbooleanfalseRemoves “chevron” icon on nested list item links
chevronCenterbooleanfalseSets “chevron” icon on nested media list items on center (vertically)
noHairlinesbooleanfalseRemoves outer hairlines
noHairlinesMdbooleanfalseRemoves outer hairlines for MD theme
noHairlinesIosbooleanfalseRemoves outer hairlines for iOS theme
noHairlinesBetweenbooleanfalseRemoves inner hairlines between items
noHairlinesBetweenMdbooleanfalseRemoves inner hairlines between items for MD theme
noHairlinesBetweenIosbooleanfalseRemoves inner hairlines between items for iOS theme
tabbooleanfalseAdds additional “tab” class when block should be used as a Tab
tabActivebooleanfalseAdds additional “tab-active” class when block used as a Tab and makes it active tab
virtualListbooleanfalseEnables Virtual List
virtualListParamsobjectObject with Virtual List Parameters
<ListGroup> properties
mediaListbooleanfalseEnables Media List for this group
sortablebooleanfalseEnables Sortable List for this group
sortableTapHoldbooleanfalseMakes list items sortable on item tap and hold (long press). In this case app will rely on custom taphold event. To make it work correctly, make sure you have also enabled touch.tapHold: true app parameter
simpleListbooleanfalseEnables simplified Simple List for this group

List Events

EventDescription
<List> events
tabShowEvent will be triggered when List Block-Tab becomes visible/active
tabHideEvent will be triggered when List Block-Tab becomes invisible/inactive
submitEvent will be triggered on list-form submit when list used as form (with enabled form prop)
<List> Sortable specific events
sortableEnableEvent will be triggered when sortable mode is enabled
sortableDisableEvent will be triggered when sortable mode is disabled
sortableSortEvent will be triggered after user release currently sorting element in new position. event.detail will contain object with from and to properties with start/new index numbers of sorted list item
<List> Virtual List specific events
virtualItemBeforeInsertEvent will be triggered before item will be added to virtual document fragment
virtualItemsBeforeInsertEvent will be triggered after current DOM list will be removed and before new document will be inserted
virtualItemsAfterInsertEvent will be triggered after new document fragment with items inserted
virtualBeforeClearEvent will be triggered before current DOM list will be removed and replaced with new document fragment

List Slots

List Svelte component (<List>) has additional slots for custom elements:

  • before-list - element will be inserted in the beginning of list view and right before <ul> main list
  • after-list - element will be inserted in the end of list view and right after <ul> main list
  • list - element will be inserted inside of <ul> main list element

Virtual List

For Virtual List usage and examples check the Virtual List Svelte Component documentation.

Sortable List

For Sortable List usage and examples check the Sortable Svelte Component documentation.

Accordion List

For Accordion List usage and examples check the Accordion Svelte Component documentation.

Examples

  1. <Page>
  2.   <Navbar title="List View"></Navbar>
  3.   <BlockTitle>Simple List</BlockTitle>
  4.   <List simpleList>
  5.     <ListItem title="Item 1"></ListItem>
  6.     <ListItem title="Item 2"></ListItem>
  7.     <ListItem title="Item 3"></ListItem>
  8.   </List>
  9.   <BlockTitle>Simple Links List</BlockTitle>
  10.   <List>
  11.     <ListItem title="Link 1" link="#"></ListItem>
  12.     <ListItem title="Link 2" link="#"></ListItem>
  13.     <ListItem title="Link 3" link="#"></ListItem>
  14.   </List>
  15.   <BlockTitle>Data list, with icons</BlockTitle>
  16.   <List>
  17.     <ListItem title="Ivan Petrov" after="CEO">
  18.       <i slot="media" class="icon demo-list-icon" />
  19.     </ListItem>
  20.     <ListItem title="John Doe" badge="5">
  21.       <i slot="media" class="icon demo-list-icon" />
  22.     </ListItem>
  23.     <ListItem title="Jenna Smith">
  24.       <i slot="media" class="icon demo-list-icon" />
  25.     </ListItem>
  26.   </List>
  27.   <BlockTitle>Links</BlockTitle>
  28.   <List>
  29.     <ListItem link="#" title="Ivan Petrov" after="CEO">
  30.       <i slot="media" class="icon demo-list-icon" />
  31.     </ListItem>
  32.     <ListItem link="#" title="John Doe" after="Cleaner">
  33.       <i slot="media" class="icon demo-list-icon" />
  34.     </ListItem>
  35.     <ListItem link="#" title="Jenna Smith">
  36.       <i slot="media" class="icon demo-list-icon" />
  37.     </ListItem>
  38.   </List>
  39.   <BlockTitle>Links, Header, Footer</BlockTitle>
  40.   <List>
  41.     <ListItem link="#" header="Name" title="John Doe" after="Edit">
  42.       <i slot="media" class="icon demo-list-icon" />
  43.     </ListItem>
  44.     <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
  45.       <i slot="media" class="icon demo-list-icon" />
  46.     </ListItem>
  47.     <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
  48.       <i slot="media" class="icon demo-list-icon" />
  49.     </ListItem>
  50.     <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
  51.       <i slot="media" class="icon demo-list-icon" />
  52.     </ListItem>
  53.   </List>
  54.   <BlockTitle>Links, no icons</BlockTitle>
  55.   <List>
  56.     <ListItem link="#" title="Ivan Petrov"></ListItem>
  57.     <ListItem link="#" title="John Doe"></ListItem>
  58.     <ListItem divider title="Divider Here"></ListItem>
  59.     <ListItem link="#" title="Ivan Petrov"></ListItem>
  60.     <ListItem link="#" title="Jenna Smith"></ListItem>
  61.   </List>
  62.   <BlockTitle>Grouped with sticky titles</BlockTitle>
  63.   <List ul={false}>
  64.     <ListGroup>
  65.       <ListItem title="A" groupTitle></ListItem>
  66.       <ListItem title="Aaron "></ListItem>
  67.       <ListItem title="Abbie"></ListItem>
  68.       <ListItem title="Adam"></ListItem>
  69.     </ListGroup>
  70.     <ListGroup>
  71.       <ListItem title="B" groupTitle></ListItem>
  72.       <ListItem title="Bailey"></ListItem>
  73.       <ListItem title="Barclay"></ListItem>
  74.       <ListItem title="Bartolo"></ListItem>
  75.     </ListGroup>
  76.     <ListGroup>
  77.       <ListItem title="C" groupTitle></ListItem>
  78.       <ListItem title="Caiden"></ListItem>
  79.       <ListItem title="Calvin"></ListItem>
  80.       <ListItem title="Candy"></ListItem>
  81.     </ListGroup>
  82.   </List>
  83.   <BlockTitle>Mixed and nested</BlockTitle>
  84.   <List>
  85.     <ListItem link="#" title="Ivan Petrov" after="CEO">
  86.       <i slot="media" class="icon demo-list-icon" />
  87.     </ListItem>
  88.     <ListItem link="#" title="Two icons here">
  89.       <i slot="media" class="icon demo-list-icon" />
  90.       <i slot="media" class="icon demo-list-icon" />
  91.     </ListItem>
  92.     <ListItem title="No icons here"></ListItem>
  93.     <li>
  94.       <ul>
  95.         <ListItem link="#" title="Ivan Petrov" after="CEO">
  96.           <i slot="media" class="icon demo-list-icon" />
  97.         </ListItem>
  98.         <ListItem link="#" title="Two icons here">
  99.           <i slot="media" class="icon demo-list-icon" />
  100.           <i slot="media" class="icon demo-list-icon" />
  101.         </ListItem>
  102.         <ListItem title="No icons here"></ListItem>
  103.         <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
  104.           <i slot="media" class="icon demo-list-icon" />
  105.         </ListItem>
  106.         <ListItem title="With toggle">
  107.           <i slot="media" class="icon demo-list-icon" />
  108.           <span slot="after">
  109.             <Toggle />
  110.           </span>
  111.         </ListItem>
  112.       </ul>
  113.     </li>
  114.     <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
  115.       <i slot="media" class="icon demo-list-icon" />
  116.     </ListItem>
  117.     <ListItem title="With toggle">
  118.       <i slot="media" class="icon demo-list-icon" />
  119.       <span slot="after">
  120.         <Toggle />
  121.       </span>
  122.     </ListItem>
  123.   </List>
  124.   <BlockTitle>Mixed, inset</BlockTitle>
  125.   <List>
  126.     <ListItem link="#" title="Ivan Petrov" after="CEO">
  127.       <i slot="media" class="icon demo-list-icon" />
  128.     </ListItem>
  129.     <ListItem link="#" title="Two icons here">
  130.       <i slot="media" class="icon demo-list-icon" />
  131.       <i slot="media" class="icon demo-list-icon" />
  132.     </ListItem>
  133.     <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
  134.       <i slot="media" class="icon demo-list-icon" />
  135.     </ListItem>
  136.     <ListItem title="With toggle">
  137.       <i slot="media" class="icon demo-list-icon" />
  138.       <span slot="after">
  139.         <Toggle />
  140.       </span>
  141.     </ListItem>
  142.     <div class="block-footer" slot="after-list">
  143.       <p>Here comes some useful information about list above</p>
  144.     </div>
  145.   </List>
  146.   <BlockTitle>Tablet inset</BlockTitle>
  147.   <List mediumInset>
  148.     <ListItem link="#" title="Ivan Petrov" after="CEO">
  149.       <i slot="media" class="icon demo-list-icon" />
  150.     </ListItem>
  151.     <ListItem link="#" title="Two icons here">
  152.       <i slot="media" class="icon demo-list-icon" />
  153.       <i slot="media" class="icon demo-list-icon" />
  154.     </ListItem>
  155.     <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
  156.       <i slot="media" class="icon demo-list-icon" />
  157.     </ListItem>
  158.     <div class="block-footer" slot="after-list">
  159.       <p>This list block will look like "inset" only on tablets (iPad)</p>
  160.     </div>
  161.   </List>
  163.   <BlockTitle>Media Lists</BlockTitle>
  164.   <Block>
  165.     <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, userc, etc.</p>
  166.   </Block>
  167.   <BlockTitle>Songs</BlockTitle>
  168.   <List mediaList>
  169.     <ListItem
  170.       link="#"
  171.       title="Yellow Submarine"
  172.       after="$15"
  173.       subtitle="Beatles"
  174.       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."
  175.     >
  176.       <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="80" />
  177.     </ListItem>
  178.     <ListItem
  179.       link="#"
  180.       title="Don't Stop Me Now"
  181.       after="$22"
  182.       subtitle="Queen"
  183.       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."
  184.     >
  185.       <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg" width="80" />
  186.     </ListItem>
  187.     <ListItem
  188.       link="#"
  189.       title="Billie Jean"
  190.       after="$16"
  191.       subtitle="Michael Jackson"
  192.       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."
  193.     >
  194.       <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg" width="80" />
  195.     </ListItem>
  196.   </List>
  197.   <BlockTitle>Mail App</BlockTitle>
  198.   <List mediaList>
  199.     <ListItem
  200.       link="#"
  201.       title="Facebook"
  202.       after="17:14"
  203.       subtitle="New messages from John Doe"
  204.       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."
  205.     ></ListItem>
  206.     <ListItem
  207.       link="#"
  208.       title="John Doe (via Twitter)"
  209.       after="17:11"
  210.       subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
  211.       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."
  212.     ></ListItem>
  213.     <ListItem
  214.       link="#"
  215.       title="Facebook"
  216.       after="16:48"
  217.       subtitle="New messages from John Doe"
  218.       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."
  219.     ></ListItem>
  220.     <ListItem
  221.       link="#"
  222.       title="John Doe (via Twitter)"
  223.       after="15:32"
  224.       subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
  225.       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."
  226.     ></ListItem>
  227.   </List>
  228.   <BlockTitle>Something more simple</BlockTitle>
  229.   <List mediaList>
  230.     <ListItem
  231.       title="Yellow Submarine"
  232.       subtitle="Beatles">
  233.       <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="44" />
  234.     </ListItem>
  235.     <ListItem
  236.       link="#"
  237.       title="Don't Stop Me Now"
  238.       subtitle="Queen">
  239.       <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg" width="44" />
  240.     </ListItem>
  241.     <ListItem
  242.       title="Billie Jean"
  243.       subtitle="Michael Jackson">
  244.       <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg" width="44" />
  245.     </ListItem>
  246.   </List>
  247.   <BlockTitle>Inset</BlockTitle>
  248.   <List mediaList inset>
  249.     <ListItem
  250.       link="#"
  251.       title="Yellow Submarine"
  252.       subtitle="Beatles">
  253.       <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
  254.     </ListItem>
  255.     <ListItem
  256.       link="#"
  257.       title="Don't Stop Me Now"
  258.       subtitle="Queen">
  259.       <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
  260.     </ListItem>
  261.     <ListItem
  262.       link="#"
  263.       title="Billie Jean"
  264.       subtitle="Michael Jackson">
  265.       <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
  266.     </ListItem>
  267.   </List>
  268. </Page>
  271. <style>
  272.   :global(.demo-list-icon, .icon-f7) {
  273.     background: #ccc;
  274.     display: block;
  275.     position: relative;
  276.   }
  277.   :global(.ios .demo-list-icon, .ios .icon-f7, .ios .icon-vi) {
  278.     width: 29px;
  279.     height: 29px;
  280.     border-radius: 6px;
  281.     box-sizing: border-box;
  282.   }
  283.   :global(.md .demo-list-icon, .md .icon-f7, .md .icon-vi) {
  284.     width: 24px;
  285.     height: 24px;
  286.     border-radius: 4px;
  287.   }
  288.   :global(.aurora .demo-list-icon, .aurora .icon-f7, .aurora .icon-vi) {
  289.     width: 18px;
  290.     height: 18px;
  291.     border-radius: 4px;
  292.   }
  293. </style>
  294. <script>
  295.   import {Page, Navbar, BlockTitle, List, ListItem, Icon, ListGroup, Toggle, BlockFooter, Block} from 'framework7-svelte';
  296. </script>

← Link

List Button →