按鈕 React 元件

按鈕 React 元件代表 Framework7 的按鈕元素。

按鈕元件

包含下列元件

Button - 單一按鈕

按鈕屬性

按鈕元件擁有與連結元件幾乎相同的屬性，但有幾個額外的按鈕特定屬性

屬性	類型	預設值	說明
<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	啟用按鈕以擁有預載器
loading	布林值	false	控制按鈕狀態以顯示/隱藏預載器和隱藏/顯示按鈕文字（將按鈕切換至載入狀態）
preloaderColor	字串		按鈕的預載器顏色
preloaderSize	數字字串		按鈕的預載器大小
<Button> 與圖示相關的屬性
iconSize	字串數字		圖示大小（以像素為單位）
iconColor	字串		圖示顏色。其中一種預設顏色
icon	字串		自訂圖示類別
iconF7	字串		F7 圖示字型圖示名稱
iconMaterial	字串		Material 圖示字型圖示名稱
iconIos	字串		如果使用 iOS 主題時要使用的圖示。由圖示系列和圖示名稱組成，並以冒號分隔，例如 `f7:house`
iconMd	字串		如果使用 MD 主題時要使用的圖示。由圖示系列和圖示名稱組成，並以冒號分隔，例如 `material:home`
<Button> 與導覽/路由相關的屬性
href	字串布林值	#	要載入的頁面網址。如果為布林值 `href="false"`，它不會新增 `href` 標籤
target	字串		連結目標屬性的值，例如 `_blank`、`_self` 等
view	字串		要載入頁面的檢視 CSS 選擇器。或 `current` 以在目前檢視中載入
external	布林值		啟用以繞過 Framework7 的連結點擊處理常式
back	布林值		啟用返回導覽連結
openIn	字串		允許開啟頁面路由為 modal 或面板。可以是 `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	字串布林值		按一下時要啟用的可排序清單 CSS 選擇器
sortableDisable	字串布林值		按一下時要停用的可排序清單 CSS 選擇器。或布林屬性，用於關閉目前開啟的可排序清單
sortableToggle	字串布林值		可於點擊時切換的 Sortable 清單的 CSS 選擇器。或切換目前已開啟/已關閉 Sortable 清單的布林屬性
searchbarEnable	字串布林值		可於點擊時啟用的可展開搜尋列的 CSS 選擇器。或啟用第一個找到的搜尋列的布林屬性
searchbarDisable	字串布林值		可於點擊時停用的可展開搜尋列的 CSS 選擇器。或停用第一個找到的搜尋列的布林屬性
searchbarToggle	字串布林值		可於點擊時切換的可展開搜尋列的 CSS 選擇器。或切換第一個找到的搜尋列的布林屬性
searchbarClear	字串布林值		可於點擊時清除的可展開搜尋列的 CSS 選擇器。或清除第一個找到的搜尋列的布林屬性
cardOpen	字串布林值		可於點擊時開啟的可展開卡片的 CSS 選擇器。或開啟第一個找到的可展開卡片的布林屬性
cardClose	字串布林值		可於點擊時關閉的可展開卡片的 CSS 選擇器。或關閉目前已開啟的可展開卡片的布林屬性
cardPreventOpen	布林值		點擊具有此屬性的元素不會開啟其父可展開卡片

按鈕事件

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

範例

buttons.jsx

import React, { useState } from 'react';
import { Navbar, Page, BlockTitle, Block, Button } from 'framework7-react';

export default () => {
  const [isLoading1, setIsLoading1] = useState(false);
  const [isLoading2, setIsLoading2] = useState(false);

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

  return (
    <Page>
      <Navbar title="Buttons" />

      <BlockTitle>Usual Buttons</BlockTitle>
      <Block strong outlineIos>
        <div className="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 className="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 className="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 className="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 className="grid grid-cols-3 grid-gap">
          <Button raised>Button</Button>
          <Button raised fill>
            Fill
          </Button>
          <Button raised outline>
            Outline
          </Button>
        </p>
        <p className="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 className="grid grid-cols-2 grid-gap">
          <Button large>Button</Button>
          <Button large fill>
            Fill
          </Button>
        </p>
        <p className="grid grid-cols-2 grid-gap">
          <Button large raised>
            Raised
          </Button>
          <Button large raised fill>
            Raised Fill
          </Button>
        </p>
      </Block>

      <BlockTitle>Small Buttons</BlockTitle>
      <Block strong outlineIos>
        <p className="grid grid-cols-3 grid-gap">
          <Button small>Button</Button>
          <Button small outline>
            Outline
          </Button>
          <Button small fill>
            Fill
          </Button>
        </p>
        <p className="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 className="grid grid-cols-2 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 className="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 className="grid grid-cols-3 grid-gap">
          <Button color="red">Red</Button>
          <Button color="green">Green</Button>
          <Button color="blue">Blue</Button>
        </p>
        <p className="grid grid-cols-3 grid-gap">
          <Button color="pink">Pink</Button>
          <Button color="yellow">Yellow</Button>
          <Button color="orange">Orange</Button>
        </p>
        <p className="grid grid-cols-3 grid-gap">
          <Button color="black">Black</Button>
          <Button color="white">White</Button>
        </p>
      </Block>
    </Page>
  );
};

改善此文件

在此頁面

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