清單按鈕 Vue 元件

清單按鈕 Vue 元件代表 Framework7 的清單按鈕元素。它們旨在用於清單 Vue 元件內部。

清單按鈕元件

包含以下元件

f7-list-button

清單按鈕屬性

屬性	類型	預設值	說明
title	字串		按鈕內部文字
text	字串		按鈕內部文字，與 `title` 相同
tab-link	字串/布林值		啟用標籤連結並指定目標標籤的 CSS 選擇器（如果指定為字串）
tab-link-active	布林值		使此標籤連結處於活動狀態
target	字串		連結目標屬性
tooltip	字串		清單按鈕工具提示文字，在按鈕懸停/按下時顯示
tooltip-trigger	字串	hover	定義如何觸發（開啟）工具提示。可以是 `hover`、`click` 或 `manual`
<f7-list-button> 導覽/路由相關屬性
href	字串布林值	#	要載入的頁面 URL。如果是布林值 `href="false"`，它不會新增 `href` 標籤
target	字串		連結目標屬性的值，例如 `_blank`、`_self` 等。
view	字串		要載入頁面的檢視 CSS 選擇器。或 `current` 以在目前檢視中載入。
external	布林值		啟用以繞過 Framework7 的連結點擊處理常式。
back	布林值		啟用返回導覽連結
open-in	字串		允許以彈出視窗或面板開啟頁面路由。可以是 `popup`、`loginScreen`、`sheet`、`popover` 或 `panel`
force	布林值		強制載入頁面並忽略歷史記錄中的前一頁（與 `back` 屬性一起使用）
reload-current	布林值		重新載入新頁面，而不是目前活動的頁面
reload-previous	布林值		用路由中的新頁面取代歷史記錄中的前一頁
reload-all	布林值		載入新頁面並從歷史記錄和 DOM 中移除所有前一頁
reload-detail	布林值		在主從檢視中重新載入詳細資料頁面
animate	布林值		停用頁面動畫
transition	字串		自訂頁面轉場的名稱
ignore-cache	布林值		忽略快取
route-tab-id	字串		可路由標籤 id
route-props	物件		物件附帶其他屬性，將傳遞至目標路由元件
prevent-router	布林值	false	如果設定，則 Framework7 路由器不會處理
<f7-list-button> 動作相關屬性
panel-open	字串布林值		按一下時要開啟的面板 CSS 選擇器。如果 DOM 中只有左側或右側面板，也可以是 `left` 或 `right`。
panel-close	字串布林值		按一下時關閉面板
panel-toggle	字串布林值		按一下時要切換的面板 CSS 選擇器。如果 DOM 中只有左側或右側面板，也可以是 `left` 或 `right`。
actions-open	字串布林值		按一下時要開啟的動作表單 CSS 選擇器
actions-close	字串布林值		按一下時要關閉的動作表單 CSS 選擇器。或布林屬性，用於關閉目前已開啟的動作表單
popup-open	字串布林值		按一下時要開啟的快顯視窗 CSS 選擇器
popup-close	字串布林值		按一下時要關閉的快顯視窗 CSS 選擇器。或布林屬性，用於關閉目前已開啟的快顯視窗
popover-open	字串布林值		按一下時要開啟的浮動提示 CSS 選擇器
popover-close	字串布林值		按一下時要關閉的浮動提示 CSS 選擇器。或布林屬性，用於關閉目前已開啟的浮動提示
sheet-open	字串布林值		按一下時要開啟的表單模式 CSS 選擇器
sheet-close	字串布林值		按一下時要關閉的表單模式 CSS 選擇器。或布林屬性，用於關閉目前已開啟的表單模式
login-screen-open	字串布林值		按一下時要開啟的登入畫面 CSS 選擇器
login-screen-close	字串布林值		按一下時要關閉的登入畫面 CSS 選擇器。或布林屬性，用於關閉目前已開啟的登入畫面
sortable-enable	字串布林值		按一下時要啟用的可排序清單 CSS 選擇器
sortable-disable	字串布林值		按一下時要停用的可排序清單 CSS 選擇器。或布林屬性，用於關閉目前已開啟的可排序清單
sortable-toggle	字串布林值		按一下時要切換的可排序清單 CSS 選擇器。或布林屬性，用於切換目前已開啟/已關閉的可排序清單
searchbar-enable	字串布林值		按一下時要啟用的可展開搜尋列 CSS 選擇器。或布林屬性，用於啟用第一個找到的搜尋列
searchbar-disable	字串布林值		按一下時要停用的可展開搜尋列 CSS 選擇器。或布林屬性，用於停用第一個找到的搜尋列
搜尋列切換	字串布林值		可展開搜尋列的 CSS 選擇器，用於在點擊時切換。或布林屬性，用於切換第一個找到的搜尋列
搜尋列清除	字串布林值		可展開搜尋列的 CSS 選擇器，用於在點擊時清除。或布林屬性，用於清除第一個找到的搜尋列
卡片開啟	字串布林值		可展開卡片的 CSS 選擇器，用於在點擊時開啟。或布林值，用於開啟第一個找到的可展開卡片
卡片關閉	字串布林值		可展開卡片的 CSS 選擇器，用於在點擊時關閉。或布林屬性，用於關閉目前已開啟的可展開卡片
卡片防止開啟	布林值		點擊具有此屬性的元素不會開啟其父可展開卡片

列出按鈕事件

事件	說明
<f7-list-button> 事件
點擊	在按鈕上點擊後觸發事件

範例

list-button.vue

<template>
  <f7-page>
    <f7-navbar title="List Button"></f7-navbar>

    <f7-list inset strong>
      <f7-list-button title="List Button 1"></f7-list-button>
      <f7-list-button title="List Button 2"></f7-list-button>
      <f7-list-button title="List Button 3"></f7-list-button>
    </f7-list>
    <f7-list inset strong>
      <f7-list-button title="Large Red Button" color="red"></f7-list-button>
    </f7-list>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7List, f7ListButton } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7List,
    f7ListButton,
  },
  setup() {},
};
</script>

改善此文件

在此頁面

清單按鈕元件
清單按鈕屬性
列出按鈕事件
範例