列表项 React 组件

列表项组件

包含以下组件：

ListItem- 主列表项元素

列表项属性

属性	类型	默认	描述
<ListItem> 属性
title	字符串		列表项标题
subtitle	字符串		列表项副标题（仅适用于媒体列表）
text	字符串		列表项文本（仅适用于媒体列表）
头部	字符串		列表项头部文本
尾部	字符串		列表项尾部文本
media	字符串		列表项媒体图像 URL
后置	字符串		列表项标签
badge	字符串数字		列表项徽章
badgeColor	字符串		列表项徽章颜色。可以是默认颜色之一
mediaItem	布尔值		启用当前列表项的媒体列表项
groupTitle	布尔值		将列表项转换为列表组标题
target	布尔值		列表项链接目标属性
noChevron	布尔值	false	移除列表项链接上的“箭头”图标
chevronCenter	布尔值	false	将媒体列表项上的“箭头”图标设置为居中（垂直）
提示	字符串		列表按钮提示按钮悬停/按下时显示的文本
提示触发器	字符串	悬停	定义如何触发（打开）提示。可以是`hover`, `click`或`manual`
<ListItem> 菜单列表特定属性
selected	布尔值		菜单列表项是否选中（当前激活）
<ListItem> 滑动删除特定属性
swipeout	布尔值		将列表项转换为滑动删除列表项
swipeoutOpened	布尔值		定义是否应打开滑动操作。注意，同一时间只能有一个滑动删除项被打开
<ListItem> 手风琴特定属性
accordionItem	布尔值	false	将列表项转换为手风琴列表项
accordionItemOpened	布尔值	false	使手风琴项打开
<ListItem> 可排序列表特定属性
sortable	布尔值		允许禁用（当`false`）特定列表项的排序。注意，这只有在列表的第一项或最后一项上才有意义，并且如果中间的一些项被禁用排序，则无法正确工作。
<ListItem> 虚拟列表特定属性
virtualListIndex	数字		允许在虚拟列表中使用时传递列表项索引（来自整个集合）。与可排序一起使用时很有用，以知道正确的更改索引
<ListItem> 智能选择特定属性
smartSelect	布尔值	false	启用智能选择行为
smartSelectParams	对象		带有智能选择参数
<ListItem> 复选框和单选按钮特定属性
checkbox	布尔值	false	启用复选框项
checkboxIcon	字符串		允许指定复选框图标位置 - 在列表项的开头或结尾。可以是`start`或`end`。默认情况下，复选框列表项图标显示在列表项的开头。
radio	布尔值	false	启用单选按钮项
radioIcon	字符串		允许指定单选按钮图标位置 - 在列表项的开头或结尾。可以是`start`或`end`。默认情况下，iOS 主题中的单选按钮列表项图标显示在列表项的结尾，MD 主题中的单选按钮列表项图标显示在列表项的开头。
已选中	布尔值	false	复选框/单选按钮输入是否被选中
defaultChecked	布尔值		定义复选框输入是否被选中，对于无控制组件的情况
indeterminate	布尔值		定义复选框输入是否处于不确定状态
name	字符串		复选框/单选按钮输入名称
值	字符串数字		复选框/单选按钮输入值
只读	布尔值	false	复选框/单选按钮输入是否只读
禁用	布尔值	false	复选框/单选按钮输入是否禁用
required	布尔值	false	复选框/单选按钮输入是否必需
<ListItem> 导航/路由相关属性
link	布尔值字符串		启用链接和链接 URL（如果指定为字符串）。与`href`prop
tabLink	字符串布尔值		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tabLinkActive	布尔值		使此选项卡链接处于活动状态
href	字符串布尔值	#	要加载的页面的 URL。如果是布尔值`href="false"`则不会添加`href`tag
target	字符串		链接目标属性值，例如`_blank`, `_self`，等等。
view	字符串		要加载页面的视图的 CSS 选择器。或者`current`在当前视图中加载。
external	布尔值		启用以绕过 Framework7 的链接点击处理程序
back	布尔值		启用返回导航链接
openIn	字符串		允许将页面路由作为模态或面板打开。可以是`popup`, `loginScreen`, `sheet`, `popover`或`panel`
force	布尔值		强制页面加载并忽略历史记录中的先前页面（与`back`属性一起使用）
reloadCurrent	布尔值		重新加载新页面而不是当前活动的页面
reloadPrevious	布尔值		用路由中的新页面替换历史记录中的先前页面
reloadAll	布尔值		加载新页面并从历史记录和 DOM 中删除所有先前页面
reloadDetail	布尔值		在主/详细信息视图中重新加载详细信息页面
animate	布尔值		禁用页面动画
transition	字符串		自定义页面过渡的名称custom page transition
ignoreCache	布尔值		忽略缓存
routeTabId	字符串		可路由选项卡 ID
routeProps	对象		将传递给目标路由组件的附加属性对象
preventRouter	布尔值	false	如果设置，则不会被 Framework7 路由器处理
相同
panelOpen	字符串布尔值		点击时打开的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
panelClose	字符串布尔值		点击时关闭面板
panelToggle	字符串布尔值		点击时切换的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
actionsOpen	字符串布尔值		点击时打开的操作表的 CSS 选择器
actionsClose	字符串布尔值		点击时关闭的操作表的 CSS 选择器。或者为关闭当前打开的操作表的布尔属性
popupOpen	字符串布尔值		点击时打开的弹出的 CSS 选择器
popupClose	字符串布尔值		点击时关闭的弹出的 CSS 选择器。或者为关闭当前打开的弹出的布尔属性
popoverOpen	字符串布尔值		点击时打开的弹出窗口的 CSS 选择器
popoverClose	字符串布尔值		点击时关闭的弹出窗口的 CSS 选择器。或者为关闭当前打开的弹出窗口的布尔属性
sheetOpen	字符串布尔值		点击时打开的表单模态的 CSS 选择器
sheetClose	字符串布尔值		点击时关闭的表单模态的 CSS 选择器。或者为关闭当前打开的表单模态的布尔属性
loginScreenOpen	字符串布尔值		点击时打开的登录屏幕的 CSS 选择器
loginScreenClose	字符串布尔值		点击时关闭的登录屏幕的 CSS 选择器。或者为关闭当前打开的登录屏幕的布尔属性
sortableEnable	字符串布尔值		点击时启用的可排序列表的 CSS 选择器
sortableDisable	字符串布尔值		点击时禁用的可排序列表的 CSS 选择器。或者为关闭当前打开的可排序列表的布尔属性
sortableToggle	字符串布尔值		点击时切换的可排序列表的 CSS 选择器。或者为切换当前打开/关闭的可排序列表的布尔属性
searchbarEnable	字符串布尔值		点击时启用的可展开搜索栏的 CSS 选择器。或者为启用第一个找到的搜索栏的布尔属性
searchbarDisable	字符串布尔值		点击时禁用的可展开搜索栏的 CSS 选择器。或者为禁用第一个找到的搜索栏的布尔属性
searchbarToggle	字符串布尔值		点击时切换的可展开搜索栏的 CSS 选择器。或者为切换第一个找到的搜索栏的布尔属性
searchbarClear	字符串布尔值		点击时清除的可展开搜索栏的 CSS 选择器。或者为清除第一个找到的搜索栏的布尔属性
cardOpen	字符串布尔值		点击时打开的可展开卡片的 CSS 选择器。或者为打开第一个找到的可展开卡片的布尔值
cardClose	字符串布尔值		点击时关闭的可展开卡片的 CSS 选择器。或者为关闭当前打开的可展开卡片的布尔属性
cardPreventOpen	布尔值		具有此属性的元素点击不会打开其父可展开卡片

列表项事件

事件	描述
<ListItem> 事件
click	当用户点击列表项时将触发事件
change	当列表项输入（单选按钮或复选框）发生“change”事件时将触发事件
swipeout	当移动滑动删除元素时将触发事件。第一个处理程序参数包含当前打开的进度百分比的`progress`对象
swipeoutOpen	当滑动删除元素开始其打开动画时将触发事件
swipeoutOpened	当滑动删除元素完成其打开动画后触发事件
swipeoutClose	当滑动删除元素开始其关闭动画时将触发事件
swipeoutClosed	当滑动删除元素完成其删除动画后触发事件
swipeoutDelete	当滑动删除元素开始其删除动画后触发事件
swipeoutDeleted	当滑动删除元素完成其删除动画后触发事件，就在它将被从 DOM 中移除之前
accordionBeforeOpen	事件将在手风琴内容开始打开动画之前触发。第一个处理器参数接收一个函数，调用时将阻止手风琴打开。`prevent`accordionOpen
accordionOpen	事件将在手风琴内容开始打开动画时触发。
accordionOpened	事件将在手风琴内容完成打开动画后触发。
accordionBeforeClose	事件将在手风琴内容开始关闭动画之前触发。第一个处理器参数接收一个函数，调用时将阻止手风琴关闭。`prevent`accordionClose
accordionClose	事件将在手风琴内容开始关闭动画时触发。
accordionClosed	事件将在手风琴内容完成关闭动画后触发。

列表项插槽

列表项 React 组件<ListItem>）具有用于自定义元素的附加插槽：

root-start- 元素将被插入到<li>元素之前插入元素
root / root-end- 元素将被插入到<li>元素之前插入元素
content-start- 元素将被插入到<div class="item-content">元素之前插入元素
content / content-end- 元素将被插入到<div class="item-content">元素之前插入元素
inner-start- 元素将被插入到<div class="item-inner">元素之前插入元素
default / inner / inner-end- 元素将被插入到<div class="item-inner">元素之前插入元素
media- 元素将被插入到<div class="item-media">元素之前插入元素
before-title- 元素将插入到<div class="item-title">元素之前插入元素
title- 元素将被插入到<div class="item-title">元素之前插入元素
after-title- 元素将插入到<div class="item-title">元素之前插入元素
subtitle- 元素将被插入到<div class="item-subtitle">元素之前插入元素
text- 元素将被插入到<div class="item-text">元素之前插入元素
header- 元素将被插入到<div class="item-header">元素之前插入元素
footer- 元素将被插入到<div class="item-footer">元素之前插入元素
after-start- 元素将被插入到<div class="item-after">元素之前插入元素
after / after-end- 元素将被插入到<div class="item-after">元素之前插入元素

<List mediaList>
  <ListItem
    link="/home/"
    title="Item Title"
    subtitle="Item Subtitle"
    text="Text"
    after="Read more"
    >
      <img src="path-to-my-image.jpg" slot="media" />
      <div slot="root-start">Root Start</div>
      <div slot="root">Root End</div>
      <div slot="content-start">Content Start</div>
      <div slot="content">Content End</div>
      <div slot="media-start">Media Start</div>
      <div slot="media">Media</div>
      <span slot="after-start">After Start</span>
      <span slot="after">After End</span>
      <div slot="inner-start">Inner Start</div>
      <div slot="inner">Inner End</div>
      <div slot="before-title">Before Title</div>
      <div slot="after-title">After Title</div>
  </ListItem>
</List>

{/* Renders to: */}

<div class="list media-list">
  <ul>
    <li class="media-item">
      <div slot="root-start">Root Start</div>
      <a class="item-link" href="/home/">
        <div class="item-content">
          <div slot="content-start">Content Start</div>
          <div class="item-media">
            <img src="path-to-my-image.jpg" slot="media" />
            <div slot="media">Media</div>
          </div>
          <div class="item-inner">
            <div slot="inner-start">Inner Start</div>
            <div class="item-title-row">
              <div slot="before-title">Before Title</div>
              <div class="item-title">Item Title</div>
              <div slot="after-title">After Title</div>
              <div class="item-after">
                <span slot="after-start">After Start</span>
                <span>Read more</span>
                <span slot="after">After End</span>
              </div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Text</div>
            <div slot="inner">Inner End</div>
          </div>
          <div slot="content">Content End</div>
        </div>
      </a>
      <div slot="root">Root End</div>
    </li>
  </ul>
</div>

示例

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>
);

改进此文档

在本页上

列表项组件
列表项属性
列表项事件
列表项插槽
示例