列表按钮 Svelte 组件

列表按钮 Svelte 组件代表 Framework7 的列表按钮元素。它们旨在用于列表 Svelte 组件内部。

列表按钮组件

包含以下组件

ListButton

列表按钮属性

属性	类型	默认值	描述
title	字符串		按钮内部文本
text	字符串		按钮内部文本，与 `title` 相同
tabLink	字符串/布尔值		启用标签链接并指定目标标签的 CSS 选择器（如果指定为字符串）
tabLinkActive	布尔值		使此标签链接处于活动状态
target	字符串		链接目标属性
tooltip	字符串		列表按钮工具提示文本，在按钮悬停/按下时显示
tooltipTrigger	字符串	悬停	定义如何触发（打开）工具提示。可以是 `hover`、`click` 或 `manual`
<ListButton> 导航/路由相关属性
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 路由器处理
<ListButton> 操作相关属性
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	布尔值		点击具有此属性的元素不会打开其父级可扩展卡片

列表按钮事件

事件	描述
<ListButton> 事件
click	在点击按钮后触发事件

示例

list-button.svelte

<script>
  import {
    Page,
    Navbar,
    List,
    ListButton,
  } from 'framework7-svelte';
</script>

<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="List Button" />

  <List inset strong>
    <ListButton title="List Button 1" />
    <ListButton title="List Button 2" />
    <ListButton title="List Button 3" />
  </List>
  <List inset strong>
    <ListButton title="Large Red Button" color="red" />
  </List>
</Page>

改进此文档

在本页上

列表按钮组件
列表按钮属性
列表按钮事件
示例