列表项 Svelte 组件

列表项组件

包含以下组件

ListItem - 主列表项元素

列表项属性

属性	类型	默认值	描述
<ListItem> 属性
title	字符串		列表项标题
subtitle	字符串		列表项副标题（仅限媒体列表）
text	字符串		列表项文本（仅限媒体列表）
header	字符串		列表项标题文本
footer	字符串		列表项页脚文本
media	字符串		列表项媒体图片 URL
after	字符串		列表项标签
badge	字符串数字		列表项徽章
badgeColor	字符串		列表项徽章颜色。一种默认颜色
mediaItem	布尔值		为当前列表项启用媒体列表项
groupTitle	布尔值		将列表项转换为列表组标题
target	布尔值		列表项链接目标属性
noChevron	布尔值	false	删除列表项链接上的“chevron”图标
chevronCenter	布尔值	false	将媒体列表项上的“chevron”图标设置为居中（垂直）
tooltip	字符串		列表按钮工具提示文本，在按钮悬停/按下时显示
tooltipTrigger	字符串	hover	定义如何触发（打开）工具提示。可以是 `hover`、`click` 或 `manual`
<ListItem> 菜单列表特定属性
selected	布尔值		菜单列表项是否被选中（当前活动）
<ListItem> Swipeout 特定属性
swipeout	布尔值		将列表项转换为 swipeout 列表项
swipeoutOpened	布尔值		定义滑动操作是否应该打开。请注意，一次只能打开一个 swipeout 项
<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	复选框/单选按钮输入是否被选中
indeterminate	布尔值		定义复选框输入是否处于不确定状态
name	字符串		复选框/单选按钮输入名称
value	字符串数字		复选框/单选按钮输入值
readonly	布尔值	false	复选框/单选按钮输入是否为只读
disabled	布尔值	false	复选框/单选按钮输入是否被禁用
required	布尔值	false	复选框/单选按钮输入是否为必填项
<ListItem> 导航/路由相关属性
link	布尔值字符串		启用链接，如果指定为字符串，则启用链接 URL。与 `href` 属性相同
tabLink	字符串布尔值		启用标签链接，并指定目标标签的 CSS 选择器（如果指定为字符串）
tabLinkActive	布尔值		使此标签链接处于活动状态
href	字符串布尔值	#	要加载页面的 URL。在布尔值 `href="false"` 的情况下，它不会添加 `href` 标签
target	字符串		链接目标属性的值，例如 `_blank`、`_self` 等。
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	字符串布尔值		要点击打开的表单模态的 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	swipeoutMove
当您移动 swipeout 元素时会触发事件。第一个处理程序参数包含包含当前打开进度百分比的 `progress` 对象	swipeoutOpen
swipeoutOpened	当 swipeout 元素开始其打开动画时会触发事件
swipeoutOpened	当滑动删除元素开始关闭动画时，将触发事件
swipeoutClosed	滑动删除元素完成关闭动画后，将触发事件
swipeoutDelete	滑动删除元素开始删除动画后，将触发事件
swipeoutDeleted	滑动删除元素完成删除动画，并在其从 DOM 中移除之前触发事件
accordionBeforeOpen	在手风琴内容开始打开动画之前触发事件。第一个处理程序参数接收 `prevent` 函数，如果调用该函数，将阻止手风琴打开。
accordionOpen	当手风琴内容开始打开动画时，将触发事件。
accordionOpened	手风琴内容完成打开动画后，将触发事件。
accordionBeforeClose	在手风琴内容开始关闭动画之前触发事件。第一个处理程序参数接收 `prevent` 函数，如果调用该函数，将阻止手风琴关闭。
accordionClose	当手风琴内容开始关闭动画时，将触发事件。
accordionClosed	手风琴内容完成关闭动画后，将触发事件。

列表项插槽

列表项 Svelte 组件 (<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>
      <div>Root Start</div>
      <a href="/home/" class="item-link">
        <div class="item-content">
          <div>Content Start</div>
          <div class="item-media">
            <img src="path-to-my-image.jpg">
          </div>
          <div class="item-inner">
            <div>Inner Start</div>
            <div class="item-title-row">
              <div>Before Title</div>
              <div class="item-title">Item Title</div>
              <div>After Title</div>
              <div class="item-after">
                <span>After Start</span>
                <span>Read more</span>
                <span>After End</span>
              </div>
            </div>
            <div class="item-subtitle">Item Subtitle</div>
            <div class="item-text">Text</div>
            <div>Inner End</div>
          </div>
          <div>Content End</div>
        </div>
      </a>
      <div>Root End</div>
    </li>
  </ul>
</div>

示例

list.svelte

<script>
  import {
    Navbar,
    Page,
    BlockTitle,
    Block,
    List,
    ListItem,
    ListGroup,
    Toggle,
  } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-invalid-attribute -->
<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"><i slot="media" class="icon icon-f7" /></ListItem>
    <ListItem title="John Doe" badge="5"><i slot="media" class="icon icon-f7" /></ListItem>
    <ListItem title="Jenna Smith"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>
  <BlockTitle>Links</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="John Doe" after="Cleaner">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Jenna Smith"><i slot="media" class="icon icon-f7" /></ListItem>
  </List>
  <BlockTitle>Links, Header, Footer</BlockTitle>
  <List dividersIos outlineIos strongIos>
    <ListItem link="#" header="Name" title="John Doe" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Phone" title="+7 90 111-22-3344" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@doe" footer="Home" after="Edit">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" header="Email" title="john@framework7" footer="Work" after="Edit">
      <i slot="media" class="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 ul={false}>
    <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">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <svelte:fragment slot="media">
        <i class="icon icon-f7" />
        <i class="icon icon-f7" />
      </svelte:fragment>
    </ListItem>
    <ListItem title="No icons here" />
    <li>
      <ul>
        <ListItem link="#" title="Ivan Petrov" after="CEO">
          <i slot="media" class="icon icon-f7" />
        </ListItem>
        <ListItem link="#" title="Two icons here">
          <svelte:fragment slot="media">
            <i class="icon icon-f7" />
            <i class="icon icon-f7" />
          </svelte:fragment>
        </ListItem>
        <ListItem title="No icons here" />
        <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
          <i slot="media" class="icon icon-f7" />
        </ListItem>
        <ListItem title="With toggle">
          <i slot="media" class="icon icon-f7" />
          <span slot="after">
            <Toggle />
          </span>
        </ListItem>
      </ul>
    </li>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem title="With toggle">
      <i slot="media" class="icon icon-f7" />
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>

  <BlockTitle>Tablet inset</BlockTitle>
  <List dividersIos outlineIos strongIos mediumInset>
    <ListItem link="#" title="Ivan Petrov" after="CEO">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <ListItem link="#" title="Two icons here">
      <svelte:fragment slot="media">
        <i class="icon icon-f7" />
        <i class="icon icon-f7" />
      </svelte:fragment>
    </ListItem>
    <ListItem link="#" title="Ultra long text goes here, no, it is really really long">
      <i slot="media" class="icon icon-f7" />
    </ListItem>
    <div class="block-footer" slot="after-list">
      <p>This list block will look like "inset" only on tablets (iPad)</p>
    </div>
  </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, users, 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="border-radius: 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="border-radius: 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="border-radius: 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="border-radius: 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="border-radius: 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="border-radius: 8px"
        src="https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg"
        width="44"
      />
    </ListItem>
  </List>
</Page>

改进此文档

在本页

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