ListItem React 组件

列表项组件

包含以下组件

ListItem - 主列表项目元素

列表项属性

道具	类型	默认	描述
<ListItem> 属性
标题	字符串		列表项目标题
副标题	字符串		列表项副标题（仅适用于媒体列表）
文字	字符串		列表项文字（仅适用于媒体列表）
头部	字符串		列表项头文本
底部	字符串		列表项尾文本
媒体	字符串		列表项媒体图像 URL
之后	字符串		列表项标签
徽章	字符串数字		列表项徽章
badgeColor	字符串		列表项徽章颜色。默认颜色之一
mediaItem	布尔型		为此列表项启用媒体列表项
groupTitle	布尔型		将列表项转换为列表组标题
目标	布尔型		列表项链接目标属性
noChevron	布尔型	false	移除列表项链接上的“箭头”图标
chevronCenter	布尔型	false	将媒体列表项上的“箭头”图标设置为居中（垂直）
工具提示	字符串		将鼠标悬停/按下按钮时显示的列表按钮工具提示文本
tooltipTrigger	字符串	hover	定义如何触发（打开）工具提示。可以是`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 主题的列表项开头。
checked	布尔型	false	复选框/单选框输入是否被选中
defaultChecked	布尔型		定义复选框输入是否选中（如果是不可控组件的情况）
indeterminate	布尔型		定义复选框输入是否处于不确定状态
name	字符串		复选框/单选框输入名称
value	字符串数字		复选框/单选框输入值
readonly	布尔型	false	复选框/单选输入框是否只读
disabled	布尔型	false	复选框/单选输入框是否禁用
required	布尔型	false	复选框/单选输入框是否必填
<ListItem> 导航/路由相关属性
link	布尔型字符串		如果指定为字符串，则启用链接和链接 URL。与 `href` 属性相同
tabLink	字符串布尔型		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tabLinkActive	布尔型		使此选项卡链接处于活动状态
href	字符串布尔型	#	将要加载的页面的 URL。如果是布尔值 `href="false"`，则不会添加 `href` 标签
目标	字符串		链接目标属性的值，例如 `_blank`、`_self` 等。
view	字符串		加载页面的 View 的 CSS 选择器。或 `current` 以在当前视图中加载。
external	布尔型		启用以绕过 Framework7 的链接点击处理程序
back	布尔型		启用返回导航链接
openIn	字符串		允许将页面路由以模态或面板的形式打开。可以是 `popup`、`loginScreen`、`sheet`、`popover` 或 `panel`
force	布尔型		强制加载页面并忽略历史记录中的前一页（与 `back` 属性一起使用）
reloadCurrent	布尔型		重新加载新页面，而不是当前活动页面
reloadPrevious	布尔型		从历史记录中替换前一页，使用来自路由的新页面
reloadAll	布尔型		加载新页面，并从历史记录和 DOM 中删除所有前一页
reloadDetail	布尔型		在主从视图中重新加载详细信息页面
animate	布尔型		禁用页面动画
transition	字符串		自定义页面过渡的名称
ignoreCache	布尔型		忽略缓存
routeTabId	字符串		可路由选项卡 ID
routeProps	对象		包含将传递给目标路由组件的附加属性的对象
preventRouter	布尔型	false	如果设置，则不会由 Framework7 路由器处理
<ListItem> 操作相关属性
panelOpen	字符串布尔型		点击时打开的面板的 CSS 选择器。如果 DOM 中只有左侧或右侧面板，也可以是 `left` 或 `right`。
panelClose	字符串布尔型		点击时关闭面板
panelToggle	字符串布尔型		点击时切换的面板的 CSS 选择器。如果 DOM 中只有左侧或右侧面板，也可以是 `left` 或 `right`。
actionsOpen	字符串布尔型		点击时打开的动作表 CSS 选择器
actionsClose	字符串布尔型		点击时关闭的动作表 CSS 选择器。或布尔值属性以关闭当前已打开的动作表
popupOpen	字符串布尔型		点击时打开的弹出窗口 CSS 选择器
popupClose	字符串布尔型		点击时关闭的弹出窗口 CSS 选择器。或布尔值属性以关闭当前已打开的弹出窗口
popoverOpen	字符串布尔型		点击时打开的气泡 CSS 选择器
popoverClose	字符串布尔型		点击时关闭的气泡 CSS 选择器。或布尔值属性以关闭当前已打开的气泡
sheetOpen	字符串布尔型		点击时打开 sheet 模态窗口的 CSS 选择器
sheetClose	字符串布尔型		点击时关闭 sheet 模态窗口的 CSS 选择器。或关闭当前打开的 sheet 模态窗口的布尔属性
loginScreenOpen	字符串布尔型		点击时打开登录屏幕的 CSS 选择器
loginScreenClose	字符串布尔型		点击时关闭登录屏幕的 CSS 选择器。或关闭当前打开的登录屏幕的布尔属性
sortableEnable	字符串布尔型		点击时启用 Sortable 列表的 CSS 选择器
sortableDisable	字符串布尔型		点击时禁用 Sortable 列表的 CSS 选择器。或关闭当前打开的 Sortable 列表的布尔属性
sortableToggle	字符串布尔型		点击时切换 Sortable 列表的 CSS 选择器。或切换当前打开/关闭的 Sortable 列表的布尔属性
searchbarEnable	字符串布尔型		点击时启用可扩展搜索栏的 CSS 选择器。或启用首个找到的搜索栏的布尔属性
searchbarDisable	字符串布尔型		点击时禁用可扩展搜索栏的 CSS 选择器。或禁用首个找到的搜索栏的布尔属性
searchbarToggle	字符串布尔型		点击时切换可扩展搜索栏的 CSS 选择器。或切换首个找到的搜索栏的布尔属性
searchbarClear	字符串布尔型		点击时清除可扩展搜索栏的 CSS 选择器。或清除首个找到的搜索栏的布尔属性
cardOpen	字符串布尔型		点击时打开可扩展卡片的 CSS 选择器。或打开首个找到的可扩展卡片的布尔属性
cardClose	字符串布尔型		点击时关闭可扩展卡片的 CSS 选择器。或关闭当前打开的可扩展卡片的布尔属性
cardPreventOpen	布尔型		点击具有此属性的元素不会打开其父级可扩展卡片

列表项事件

事件	描述
<ListItem> 事件
click	用户点击列表项时触发事件
change	列表项输入（单选按钮或复选框）发生“change”事件时触发事件
swipeout	swipeoutMove
在移动 Swipeout 元素时触发事件。第一个处理程序参数包含具有当前打开进度百分比的 `progress` 对象	swipeoutOpen
swipeoutOpened	Swipeout 元素开始打开动画时触发事件
swipeoutOpened	Swipeout 元素完成打开动画后触发事件
swipeoutClose	Swipeout 元素开始关闭动画时触发事件
swipeoutClosed	Swipeout 元素完成关闭动画后触发事件
swipeoutDelete	Swipeout 元素开始删除动画后触发事件
swipeoutDeleted	Swipeout 元素完成删除动画后，触发事件，然后将其从 DOM 中删除
accordionBeforeOpen	手风琴内容开始展开动画时触发事件。
accordionOpened	手风琴内容完成展开动画后触发事件。
accordionBeforeClose	手风琴内容开始关闭动画前触发事件。第一个处理程序参数接收 `prevent` 函数，在调用时可防止手风琴关闭。
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>
);

完善此文档

在此页面上

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