ボタン React コンポーネント

Button React コンポーネントは、Framework7 のボタン要素を表します。

ボタンコンポーネント

以下のコンポーネントが含まれています

Button - シングルボタン

ボタンのプロパティ

ボタンコンポーネントは、リンクコンポーネントとほぼ同じプロパティを持ちますが、いくつかの追加のボタン固有のプロパティがあります。

プロパティ	型	デフォルト	説明
<Button> プロパティ
type	文字列		`submit`、`button`、または`reset` のいずれかの場合、同じ`type`属性を持つ`<button>`要素としてレンダリングされます。
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	文字列数値		px単位のアイコンサイズ
iconColor	文字列		デフォルトの色のいずれか。
icon	文字列		カスタムアイコンクラス
iconF7	文字列		F7アイコンフォントアイコンの名前
iconMaterial	文字列		マテリアルアイコンフォントアイコンの名前
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	文字列ブール値		クリック時に有効にするソート可能なリストのCSSセレクタ
sortableDisable	文字列ブール値		クリック時に無効にするソート可能なリストのCSSセレクタ。または、現在開いているソート可能なリストを閉じるブール値プロパティ。
sortableToggle	文字列ブール値		クリック時に切り替えるソート可能なリストのCSSセレクタ。または、現在開いている/閉じているソート可能なリストを切り替えるブール値プロパティ。
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>
  );
};

このドキュメントを改善する

このページで

ボタンコンポーネント
ボタンのプロパティ
ボタンイベント
例