列表按钮 React 组件
列表按钮 React 组件代表 Framework7 的列表按钮元素。它们旨在用于 列表 React 组件 内部。
列表按钮组件
包括以下组件
ListButton
列表按钮属性
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
| title | string | 按钮内部文本 | |
| text | string | Button 内部文本，与 title 相同 | |
| tabLink | string/boolean | 启用 tab 链接并指定目标 tab 的 CSS 选择器（如果指定为字符串） | |
| tabLinkActive | boolean | 使此选项卡链接处于活动状态 | |
| target | string | Link target 属性 | |
| tooltip | string | 列出按钮 工具提示 鼠标悬停/按压时显示在按钮上的文本 | |
| tooltipTrigger | string | hover | 定义如何触发（打开）工具提示。可以是 hover、click 或 manual |
| <ListButton> 导航/路由相关属性 | |||
| href | string boolean | # | 要加载的页面的 URL。布尔型 href="false" 时不添加 href 标记 |
| target | string | 链接目标属性的值，例如 _blank、_self 等 | |
| view | string | 要加载页面的视图的 CSS 选择器。或 current 在当前视图中加载。 | |
| external | boolean | 启用以绕过 Framework7 的链接点击处理程序 | |
| back | boolean | 启用后退导航链接 | |
| openIn | string | 允许将页面路由作为模态或面板打开。可以是 popup、loginScreen、sheet、popover 或 panel | |
| force | boolean | 强制加载页面并忽略历史记录中的前一页面（与 back 属性一起使用） | |
| reloadCurrent | boolean | 重新加载新页面，而不是当前活动的页面 | |
| reloadPrevious | boolean | 用路由中的新页面替换历史记录中的前一页 | |
| reloadAll | boolean | 加载新页面，并从历史记录和 DOM 中删除以前的所有页面 | |
| reloadDetail | boolean | 重新加载主从视图中的从属页面 | |
| animate | boolean | 禁用页面动画 | |
| transition | string | 自定义页面转换 的名称 | |
| ignoreCache | boolean | 忽略缓存 | |
| routeTabId | string | 可路由选项卡 ID | |
| routeProps | object | 将传递给目标路由组件的其他属性的对象 | |
| preventRouter | boolean | false | 如果设置，则 Framework7 路由器将不会处理它 |
| <ListButton> 操作相关属性 | |||
| panelOpen | string boolean | 单击时打开的面板的 CSS 选择器。或如果 DOM 中只有左边或右边面板，则可以是 left 或 right。 | |
| panelClose | string boolean | 单击时关闭面板 | |
| panelToggle | string boolean | 单击时切换的面板的 CSS 选择器。或如果 DOM 中只有左边或右边面板，则可以是 left 或 right。 | |
| actionsOpen | string boolean | 单击时打开的动作表 CSS 选择器 | |
| actionsClose | string boolean | 单击时关闭的动作表 CSS 选择器。或布尔属性以关闭当前打开的动作表 | |
| popupOpen | string boolean | 单击时打开的弹出窗口的 CSS 选择器 | |
| popupClose | string boolean | 单击时关闭的弹出窗口的 CSS 选择器。或布尔属性以关闭当前打开的弹出窗口 | |
| popoverOpen | string boolean | 单击时打开的弹出提示的 CSS 选择器 | |
| popoverClose | string boolean | 单击时关闭的弹出提示的 CSS 选择器。或布尔属性以关闭当前打开的弹出提示 | |
| sheetOpen | string boolean | 单击时打开的 sheet 模态的 CSS 选择器 | |
| sheetClose | string boolean | 单击时关闭的 sheet 模态的 CSS 选择器。或布尔属性以关闭当前打开的 sheet 模态 | |
| loginScreenOpen | string boolean | 单击时打开的登录界面的 CSS 选择器 | |
| loginScreenClose | string boolean | 点击即可关闭登录界面的 CSS 选择器。或布尔值属性，用于关闭当前已打开的登录界面 | |
| sortableEnable | string boolean | 点击即可启用 Sortable 列表的 CSS 选择器 | |
| sortableDisable | string boolean | 点击即可禁用 Sortable 列表的 CSS 选择器。或布尔值属性，用于关闭当前已打开的 Sortable 列表 | |
| sortableToggle | string boolean | 点击即可切换 Sortable 列表的 CSS 选择器。或布尔值属性，用于切换当前已打开/关闭的 Sortable 列表 | |
| searchbarEnable | string boolean | 点击即可启用可展开搜索栏的 CSS 选择器。或布尔值属性，用于启用第一个找到的搜索栏 | |
| searchbarDisable | string boolean | 点击即可禁用可展开搜索栏的 CSS 选择器。或布尔值属性，用于禁用第一个找到的搜索栏 | |
| searchbarToggle | string boolean | 点击即可切换可展开搜索栏的 CSS 选择器。或布尔值属性，用于切换第一个找到的搜索栏 | |
| searchbarClear | string boolean | 点击即可清除可展开搜索栏的 CSS 选择器。或布尔值属性，用于清除第一个找到的搜索栏 | |
| cardOpen | string boolean | 点击即可打开可展开卡片的 CSS 选择器。或布尔值属性，用于打开第一个找到的可展开卡片 | |
| cardClose | string boolean | 点击即可关闭可展开卡片的 CSS 选择器。或布尔值属性，用于关闭当前已打开的可展开卡片 | |
| cardPreventOpen | boolean | 点击具有此属性的元素不会打开其父级可展开卡片 | |
列表按钮事件
| 事件 | 描述 |
|---|---|
| <ListButton> 事件 | |
| click | 点击按钮后触发事件 |
示例
list-button.jsx
import React from 'react';
import { Navbar, Page, List, ListButton } from 'framework7-react';
export default () => {
return (
<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>
);
};