按鈕清單 Svelte 組件

List Button Svelte 組件表示 Framework7 的 List Button 元素。它們旨在用於 List Svelte 組件內部。

List Button 組件

包含下列組件

ListButton

List Button 屬性

屬性	類型	預設值	說明
title	字串		按鈕內文
text	字串		按鈕內文，與 `title` 相同
tabLink	字串/布林		啟用標籤連結並指定目標標籤的 CSS 選擇器（如果指定為字串）
tabLinkActive	布林		使此標籤連結處於活動狀態
target	字串		連結目標屬性
tooltip	字串		List button tooltip 文字，在按鈕滑鼠懸停/按下時顯示
tooltipTrigger	字串	hover	定義如何觸發（開啟）Tooltip。可以是 `hover`、`click` 或 `manual`
<ListButton> 導覽/路由相關屬性
href	字串布林	#	要載入頁面的 URL。如果是布林 `href="false"`，它不會新增 `href` 標籤
target	字串		連結目標屬性的值，例如 `_blank`、`_self` 等。
view	字串		要載入頁面的 View 的 CSS 選擇器。或 `current` 以在目前檢視中載入。
external	布林		啟用以繞過 Framework7 的連結點擊處理常式
back	布林		啟用返回導覽連結
openIn	字串		允許將頁面路由開啟為 modal 或面板。可以是 `popup`、`loginScreen`、`sheet`、`popover` 或 `panel`
force	布林		強制載入頁面並忽略歷史記錄中的前一頁（與 `back` 屬性一起使用）
reloadCurrent	布林		重新載入新頁面，而不是目前活動的頁面
reloadPrevious	布林		用路由中的新頁面取代歷史記錄中的前一頁
reloadAll	布林		載入新頁面並從歷史記錄和 DOM 中移除所有前一頁
reloadDetail	布林		在 Master Detail 檢視中重新載入 Detail 頁面
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.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>

改善此文件

在此頁面

List Button 組件
List Button 屬性
列出按鈕事件
範例