列表按鈕 React 元件
列表按鈕 React 元件表示 Framework7 的 列表按鈕 元素。它們旨在用於 列表 React 元件 內部。
列表按鈕元件
包含下列元件
ListButton
列表按鈕屬性
| 屬性 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| title | 字串 | 按鈕內部文字 | |
| text | 字串 | 按鈕內部文字，與 title 相同 | |
| tabLink | 字串/布林值 | 啟用分頁連結，並指定目標分頁的 CSS 選擇器（如果指定為字串） | |
| tabLinkActive | 布林值 | 使此分頁連結處於作用中 | |
| target | 字串 | 連結目標屬性 | |
| tooltip | 字串 | 列表按鈕 工具提示 文字，在按鈕滑鼠移入/按下時顯示 | |
| tooltipTrigger | 字串 | hover | 定義如何觸發（開啟）工具提示。可以是 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 選擇器。或如果 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 | 布林值 | 按一下具有此屬性的元素不會開啟其父層可展開卡片 | |
清單按鈕事件
| 事件 | 說明 |
|---|---|
| <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>
);
};