列表 React 组件

列表视图是应用程序中常见的通用且功能强大的用户界面组件。列表视图在可滚动的多行列表中显示数据，这些数据可划分为多个部分/组。

列表视图有很多用途

允许用户浏览分层结构化数据
提供项目索引列表
在视觉上不同的分组中显示详细信息和控件
展示可选选项的列表

列表 React 组件表示 Framework7 的列表视图组件。

列表组件

包括以下组件

List - 主要列表视图元素
ListGroup - 列表组元素

列表属性

属性	类型	默认值	描述
`<List>`属性
inset	布尔值		缩进列表。`insetIos` 和 `insetMd` 属性可用于特定主题的布局
xsmallInset	布尔值		当应用程序宽度 >= 480 像素时缩进列表。`xsmallInsetIos` 和 `xsmallInsetMd` 属性可用于特定主题的布局
smallInset	布尔值		当应用程序宽度 >= 568 像素时缩进列表。`smallInsetIos` 和 `smallInsetMd` 属性可用于特定主题的布局
mediumInset	布尔值		当应用程序宽度 >= 768 像素时缩进列表。`mediumInsetIos` 和 `mediumInsetMd` 属性可用于特定主题的布局
largeInset	布尔值		当应用程序宽度 >= 1024 像素时缩进列表。`largeInsetIos` 和 `largeInsetMd` 属性可用于特定主题的布局
xlargeInset	布尔值		当应用程序宽度 >= 1200 像素时缩进列表。`xlargeInsetIos` 和 `xlargeInsetMd` 属性可用于特定主题的布局
strong	布尔值		为列表添加额外高亮。`strongIos` 和 `strongMd` 属性可用于特定主题的布局
outline	布尔值		为列表制作轮廓（带边框）。`outlineIos` 和 `outlineMd` 属性可用于特定主题的布局
dividers	布尔值		在列表项之间添加分隔符（边框）。`dividersIos` 和 `dividersMd` 属性可用于特定主题的布局
mediaList	布尔值	假	启用媒体列表
linksList	布尔值	假	启用简化的链接列表
simpleList	布尔值	假	启用简化的简单列表
sortable	布尔值	假	启用可排序列表
sortableOpposite	布尔值	假	在另一边（LTR 中的左侧）渲染可排序处理程序
sortableTapHold	布尔值	假	对项目进行点按并保持（长按）时，可将列表项设置为可排序。在此情况下，应用程序将依赖于自定义的 `taphold` 事件。为了使其正常工作，请确保还启用了 `touch.tapHold: true` 应用程序参数
sortableEnabled	布尔值	假	对可排序列表启用排序
sortableMoveElements	布尔值		当它通过时，它将覆盖相同的 `sortable.moveElements` 全局应用程序参数。
menuList	布尔值		启用菜单列表
accordion	布尔值	假	启用手风琴列表
accordionOpposite	布尔值	假	在另一边（LTR 中的左侧）渲染手风琴人字形图标
contactsList	布尔值	假	启用联系人列表，方法是添加必需的附加类进行样式设置
form	布尔值	假	启用列表块上的 `<form>` 标记而不是 `<div>`
formStoreData	布尔值	假	启用当前表单的表单存储
noChevron	布尔值	假	删除巢状列表项链接上的“人字形”图标
chevronCenter	布尔值	假	将巢状媒体列表项上的“人字形”图标设置在中间（垂直）
tab	布尔值	假	当块应被用作选项卡时，添加额外的“选项卡”类
tabActive	布尔值	假	当区块用作选项卡时，增加额外的“tab-active”类，并使其成为活动选项卡
virtualList	布尔值	假	启用虚拟列表
virtualListParams	object		包含虚拟列表参数的对象
<ListGroup> 属性
mediaList	布尔值	假	为该组启用媒体列表
sortable	布尔值	假	为该组启用可排序列表
sortableTapHold	布尔值	假	对项目进行点按并保持（长按）时，可将列表项设置为可排序。在此情况下，应用程序将依赖于自定义的 `taphold` 事件。为了使其正常工作，请确保还启用了 `touch.tapHold: true` 应用程序参数
simpleList	布尔值	假	为该组启用简化的简单列表

列表事件

事件	描述
<List> 事件
tabShow	列表块选项卡可见/活动时将触发事件
tabHide	列表块选项卡不可见/不活动时将触发事件
submit	在将列表用作表单时（启用 `form` 属性），并在列表表单提交时触发事件
<List> 特定的可排序事件
sortableEnable	启用可排序模式时将触发事件
sortableDisable	禁用可排序模式时将触发事件
sortableSort	用户在新的位置释放当前正在排序的元素后将触发事件。`event.detail` 包含一个包含 `from` 和 `to` 属性的对象，其中包含已排序列表项的开始/新索引号
<List> 特定的虚拟列表事件
virtualItemBeforeInsert	在将项添加到虚拟文档片段之前触发事件
virtualItemsBeforeInsert	在移除当前 DOM 列表，并在插入新文档之前触发事件
virtualItemsAfterInsert	在插入带有项的新文档片段后触发事件
virtualBeforeClear	在移除当前 DOM 列表并用新文档片段替换之前触发事件

列表插槽

列表 React 组件（<List>）为自定义元素提供了额外的插槽

before-list - 元素将被插入到列表视图的开头，紧靠 <ul> 主列表之前
after-list - 元素将被插入到列表视图的末尾，紧靠 <ul> 主列表之后
list - 元素将被插入到 <ul> 主列表元素中

虚拟列表

有关虚拟列表用法和示例，请查看Virtual List React Component 文档。

可排序列表

有关可排序列表用法和示例，请查看Sortable React Component 文档。

列表手风琴

有关手风琴列表用法和示例，请查看Accordion React Component 文档。

示例

list.jsx

import React from 'react';
import {
  Navbar,
  Page,
  BlockTitle,
  BlockFooter,
  Block,
  List,
  ListItem,
  ListGroup,
  Icon,
  Toggle,
} from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="List View" />
    <Block>
      <p>
        Framework7 allows you to be flexible with list views (table views). You can make them as
        navigation menus, you can use there icons, inputs, and any elements inside of the list, and
        even make them nested:
      </p>
    </Block>
    <BlockTitle>Simple List</BlockTitle>
    <List dividersIos simpleList>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Strong List</BlockTitle>
    <List dividersIos simpleList strong>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Strong Outline List</BlockTitle>
    <List dividersIos simpleList strong outline>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Strong Inset List</BlockTitle>
    <List dividersIos simpleList strong inset>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Strong Outline Inset List</BlockTitle>
    <List dividersIos simpleList strong outline inset>
      <ListItem title="Item 1" />
      <ListItem title="Item 2" />
      <ListItem title="Item 3" />
    </List>

    <BlockTitle>Simple Links List</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem title="Link 1" link="#" />
      <ListItem title="Link 2" link="#" />
      <ListItem title="Link 3" link="#" />
    </List>
    <BlockTitle>Data list, with icons</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="John Doe" badge="5">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="Jenna Smith">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="John Doe" after="Cleaner">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Jenna Smith">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links, Header, Footer</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" header="Name" title="John Doe" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
    </List>
    <BlockTitle>Links, no icons</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <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 dividersIos outlineIos strongIos>
      <ListGroup>
        <ListItem title="A" groupTitle />
        <ListItem title="Aaron " />
        <ListItem title="Abbie" />
        <ListItem title="Adam" />
      </ListGroup>
      <ListGroup>
        <ListItem title="B" groupTitle />
        <ListItem title="Bailey" />
        <ListItem title="Barclay" />
        <ListItem title="Bartolo" />
      </ListGroup>
      <ListGroup>
        <ListItem title="C" groupTitle />
        <ListItem title="Caiden" />
        <ListItem title="Calvin" />
        <ListItem title="Candy" />
      </ListGroup>
    </List>
    <BlockTitle>Mixed and nested</BlockTitle>
    <List dividersIos outlineIos strongIos>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Two icons here">
        <Icon slot="media" icon="icon-f7" />
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="No icons here" />
      <li>
        <ul>
          <ListItem link="#" title="Ivan Petrov" after="CEO">
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem link="#" title="Two icons here">
            <Icon slot="media" icon="icon-f7" />
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem title="No icons here" />
          <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
            <Icon slot="media" icon="icon-f7" />
          </ListItem>
          <ListItem title="With toggle">
            <Icon slot="media" icon="icon-f7" />
            <Toggle slot="after" />
          </ListItem>
        </ul>
      </li>
      <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem title="With toggle">
        <Icon slot="media" icon="icon-f7" />
        <Toggle slot="after" />
      </ListItem>
    </List>

    <BlockTitle>Tablet inset</BlockTitle>
    <List dividersIos outlineIos strongIos mediumInset>
      <ListItem link="#" title="Ivan Petrov" after="CEO">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Two icons here">
        <Icon slot="media" icon="icon-f7" />
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
        <Icon slot="media" icon="icon-f7" />
      </ListItem>
      <BlockFooter slot="after-list">
        <p>This list block will look like "inset" only on tablets (iPad)</p>
      </BlockFooter>
    </List>

    <BlockTitle>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 dividersIos mediaList outlineIos strongIos>
      <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"
          style={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
          width="80"
        />
      </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"
          style={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
          width="80"
        />
      </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"
          style={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
          width="80"
        />
      </ListItem>
    </List>
    <BlockTitle>Mail App</BlockTitle>
    <List dividersIos mediaList outlineIos strongIos>
      <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>
    <BlockTitle>Something more simple</BlockTitle>
    <List dividersIos mediaList outlineIos strongIos>
      <ListItem title="Yellow Submarine" subtitle="Beatles">
        <img
          slot="media"
          style={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg"
          width="44"
        />
      </ListItem>
      <ListItem link="#" title="Don't Stop Me Now" subtitle="Queen">
        <img
          slot="media"
          style={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/fashion-88x88-2.jpg"
          width="44"
        />
      </ListItem>
      <ListItem title="Billie Jean" subtitle="Michael Jackson">
        <img
          slot="media"
          style={{ borderRadius: '8px' }}
          src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
          width="44"
        />
      </ListItem>
    </List>
  </Page>
);

改善此文档

在此页面上

列表组件
列表属性
列表事件
列表插槽
虚拟列表
可排序列表
列表手风琴
示例