按鈕 Svelte 組件

按鈕 Svelte 組件表示 Framework7 的按鈕元素。

按鈕組件

包含下列組件

按鈕 - 單一按鈕

按鈕屬性

按鈕組件具有與連結組件幾乎相同的屬性，但有少數按鈕特定的額外屬性

屬性	類型	預設	說明
<Button> 屬性
type	字串		如果為 `submit`、`button` 或 `reset` 之一，則會以 `<button>` 元素呈現，並具有相同的 `type` 屬性
tabLink	字串布林值		啟用標籤連結，並指定目標標籤的 CSS 選擇器（如果指定為字串）
tabLinkActive	布林值	false	使此標籤連結處於活動狀態
active	布林值	false	在分段控制元件中使用時，使此按鈕處於活動狀態。必須用於 `tab-link-active`
text	字串		按鈕文字標籤
tooltip	字串		按鈕工具提示文字，在按鈕滑鼠移入/按下時顯示
tooltipTrigger	字串	hover	定義如何觸發（開啟）工具提示。可以是 `hover`、`click` 或 `manual`
round	布林值	false	使按鈕變為圓形
roundIos	布林值	false	僅為 iOS 主題使按鈕變為圓形
roundMd	布林值	false	僅為 MD 主題使按鈕變為圓形
large	布林值	false	使按鈕變大
largeIos	布林值	false	僅為 iOS 主題使按鈕變大
largeMd	布林值	false	僅為 MD 主題使按鈕變大
small	布林值	false	使按鈕變小
smallIos	布林值	false	僅為 iOS 主題使按鈕變小
smallMd	布林值	false	僅為 MD 主題使按鈕變小
fill	布林值	false	使按鈕填滿顏色
fillIos	布林值	false	僅為 iOS 主題使按鈕填滿顏色
fillMd	布林值	false	僅為 MD 主題使按鈕填滿顏色
tonal	布林值	false	使按鈕為色調樣式
tonalIos	布林值	false	僅為 iOS 主題使按鈕為色調樣式
tonalMd	布林值	false	僅為 MD 主題使按鈕為色調樣式
raised	布林值	false	使按鈕凸起
raisedIos	布林值	false	僅在 iOS 主題中使按鈕凸起
raisedMd	布林值	false	僅在 MD 主題中使按鈕凸起
outline	布林值	false	使按鈕為外框
outlineIos	布林值	false	僅在 iOS 主題中使按鈕為外框
outlineMd	布林值	false	僅在 MD 主題中使按鈕為外框
<Button> 與預載器相關的屬性
preloader	布林值	false	啟用按鈕具有預載器
載入中	布林值	false	控制按鈕狀態，顯示/隱藏預載器，隱藏/顯示按鈕文字（切換按鈕至載入狀態）
preloaderColor	字串		按鈕的預載器顏色
preloaderSize	數字字串		按鈕的預載器大小
<Button> 圖示相關屬性
iconSize	字串數字		圖示大小，單位為 px
iconColor	字串		圖示顏色。為預設顏色之一
icon	字串		自訂圖示類別
iconF7	字串		F7 Icons 字型圖示名稱
iconMaterial	字串		Material Icons 字型圖示名稱
iconIos	字串		在使用 iOS 主題時使用的圖示。由圖示家族和圖示名稱組成，以冒號分隔，例如：`f7:house`
iconMd	字串		在使用 MD 主題時使用的圖示。由圖示家族和圖示名稱組成，以冒號分隔，例如：`material:home`
<Button> 導覽/路由相關屬性
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 路由器不會處理
<Button> 動作相關屬性
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	字串布林值		點選時要啟用的 Sortable 清單 CSS 選擇器
sortableDisable	字串布林值		點選時要停用的 Sortable 清單 CSS 選擇器。或者布林屬性，用於關閉目前開啟的 Sortable 清單
sortableToggle	字串布林值		點選時要切換的 Sortable 清單 CSS 選擇器。或者布林屬性，用於切換目前開啟/關閉的 Sortable 清單
searchbarEnable	字串布林值		點選時要啟用的可展開搜尋欄 CSS 選擇器。或者布林屬性，用於啟用第一個找到的搜尋欄
searchbarDisable	字串布林值		可於點選時停用的可展開搜尋列的 CSS 選擇器。或停用第一個找到的搜尋列的布林屬性
searchbarToggle	字串布林值		可於點選時切換的可展開搜尋列的 CSS 選擇器。或切換第一個找到的搜尋列的布林屬性
searchbarClear	字串布林值		可於點選時清除的可展開搜尋列的 CSS 選擇器。或清除第一個找到的搜尋列的布林屬性
cardOpen	字串布林值		可於點選時開啟的可展開卡片的 CSS 選擇器。或開啟第一個找到的可展開卡片的布林值
cardClose	字串布林值		可於點選時關閉的可展開卡片的 CSS 選擇器。或關閉目前已開啟的可展開卡片的布林屬性
cardPreventOpen	布林值		點選具有此屬性的元素不會開啟其父可展開卡片

按鈕事件

事件	說明
<Button> 事件
click	點選按鈕後觸發事件

範例

buttons.svelte

<script>
  import {
    Page,
    Navbar,
    BlockTitle,
    Block,
    Button,
  } from 'framework7-svelte';

  let isLoading1 = false;
  let isLoading2 = false;

  const load1 = () => {
    if (isLoading1) return;
    isLoading1 = true;
    setTimeout(() => {
      isLoading1 = false;
    }, 4000);
  };

  const load2 = () => {
    if (isLoading2) return;
    isLoading2 = true;
    setTimeout(() => {
      isLoading2 = false;
    }, 4000);
  };
</script>

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

  <BlockTitle>Usual Buttons</BlockTitle>
  <Block strong outlineIos>
    <div class="grid grid-cols-3 grid-gap">
      <Button>Button</Button>
      <Button>Button</Button>
      <Button round>Round</Button>
    </div>
  </Block>

  <BlockTitle>Tonal Buttons</BlockTitle>
  <Block strong outlineIos>
    <div class="grid grid-cols-3 grid-gap">
      <Button tonal>Button</Button>
      <Button tonal>Button</Button>
      <Button tonal round>Round</Button>
    </div>
  </Block>

  <BlockTitle>Fill Buttons</BlockTitle>
  <Block strong outlineIos>
    <div class="grid grid-cols-3 grid-gap">
      <Button fill>Button</Button>
      <Button fill>Button</Button>
      <Button fill round>Round</Button>
    </div>
  </Block>

  <BlockTitle>Outline Buttons</BlockTitle>
  <Block strong outlineIos>
    <div class="grid grid-cols-3 grid-gap">
      <Button outline>Button</Button>
      <Button outline>Button</Button>
      <Button outline round>Round</Button>
    </div>
  </Block>

  <BlockTitle>Raised Buttons</BlockTitle>
  <Block strong outlineIos>
    <p class="grid grid-cols-3 grid-gap">
      <Button raised>Button</Button>
      <Button raised fill>Fill</Button>
      <Button raised outline>Outline</Button>
    </p>
    <p class="grid grid-cols-3 grid-gap">
      <Button raised round>Round</Button>
      <Button raised fill round>Fill</Button>
      <Button raised outline round>Outline</Button>
    </p>
  </Block>

  <BlockTitle>Large Buttons</BlockTitle>
  <Block strong outlineIos>
    <p class="grid grid-cols-2 grid-gap">
      <Button large>Button</Button>
      <Button large fill>Fill</Button>
    </p>
    <p class="grid grid-cols-2 grid-gap">
      <Button large raised>Raised</Button>
      <Button large raised fill>Raised Fill</Button>
    </p>
    <p class="grid grid-cols-2 grid-gap">
      <Button large round>Round</Button>
      <Button large round fill>Round Fill</Button>
    </p>
  </Block>

  <BlockTitle>Small Buttons</BlockTitle>
  <Block strong outlineIos>
    <p class="grid grid-cols-3 grid-gap">
      <Button small>Button</Button>
      <Button small outline>Outline</Button>
      <Button small fill>Fill</Button>
    </p>
    <p class="grid grid-cols-3 grid-gap">
      <Button small round>Button</Button>
      <Button small outline round>Outline</Button>
      <Button small fill round>Fill</Button>
    </p>
  </Block>

  <BlockTitle>Preloader Buttons</BlockTitle>
  <Block strong outlineIos>
    <p class="grid grid-cols-3 grid-gap">
      <Button preloader loading={isLoading1} onClick={load1} large>Load</Button>
      <Button preloader loading={isLoading2} onClick={load2} large fill>Load</Button>
    </p>
  </Block>

  <BlockTitle>Color Buttons</BlockTitle>
  <Block strong outlineIos>
    <div class="grid grid-cols-3 grid-gap">
      <Button color="red">Red</Button>
      <Button color="green">Green</Button>
      <Button color="blue">Blue</Button>
    </div>
  </Block>

  <BlockTitle>Color Fill Buttons</BlockTitle>
  <Block strong outlineIos>
    <p class="grid grid-cols-3 grid-gap">
      <Button color="red">Red</Button>
      <Button color="green">Green</Button>
      <Button color="blue">Blue</Button>
    </p>
    <p class="grid grid-cols-3 grid-gap">
      <Button color="pink">Pink</Button>
      <Button color="yellow">Yellow</Button>
      <Button color="orange">Orange</Button>
    </p>
    <p class="grid grid-cols-3 grid-gap">
      <Button color="black">Black</Button>
      <Button color="white">White</Button>
    </p>
  </Block>
</Page>

改善此文件

在此頁面

按鈕組件
按鈕屬性
按鈕事件
範例