ボタンVueコンポーネント

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

ボタンコンポーネント

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

f7-button - シングルボタン
f7-segmented - ボタンのセグメント化されたラッパー

ボタンのプロパティ

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

Prop	Type	Default	Description
<f7-segmented> properties
raised	boolean	false	セグメント化された盛り上がりを作る
raised-ios	boolean	false	iOSテーマでのみ、セグメント化して表示します。
raised-md	boolean	false	MD テーマでのみ、セグメント化された状態で表示されます。
raised-aurora	boolean	false	Aurora テーマでのみ、セグメント化された盛り上がりを作る
round	boolean	false	セグメント化された円形にする
round-ios	boolean	false	iOSテーマでのみセグメント化されたラウンド型にする
round-md	boolean	false	MDテーマのみでセグメント化された丸型にする
round-aurora	boolean	false	Aurora」テーマで、「Segmented Round」のみを作成
strong	boolean	false	強烈なセグメンテーションにする
strong-ios	boolean	false	iOSテーマでのみ、強力なセグメント化を行う
strong-md	boolean	false	MDテーマでのみ「強力な分割」を行う
strong-aurora	boolean	false	Auroraテーマでのみ強く分割します。
tag	string	div	セグメント化された要素のレンダリングに使用されるタグ
<f7-button> properties
type	string		submit`,` button`,` reset `のいずれかであれば、同じ` type `属性を持つ`
tab-link	string boolean		タブリンクを有効にし、対象となるタブの CSS セレクタを指定します（文字列で指定する場合）。
tab-link-active	boolean	false	このタブリンクをアクティブにします。
active	boolean	false	セグメント化されている場合、このボタンをアクティブにします。tab-link-active` の代わりに使用する必要があります。
text	string		ボタンのテキストラベル
tooltip	string		ボタンの tooltip テキストを表示します。
tooltip-trigger	string	hover	どのようにしてツールチップを開くかを定義します。hover`,` click`,` manual` のいずれかです。
round	boolean	false	ボタンを丸くする
round-ios	boolean	false	iOSテーマのみ、ボタンを丸くします。
round-md	boolean	false	MD テーマのみ、ボタンを丸くします。
round-aurora	boolean	false	Aurora テーマでのみ、ボタンを丸くします。
large	boolean	false	大きいボタンの作成
large-ios	boolean	false	iOSテーマのみに大きなボタンを作成します
large-md	boolean	false	MDテーマのみに大きなボタンを作成
large-aurora	boolean	false	Auroraテーマのみに大きなボタンを作成します
small	boolean	false	小さいボタンを作成
small-ios	boolean	false	iOSテーマのみに小さなボタンを作成します。
small-md	boolean	false	MDテーマのみに小さいボタンを作成
small-aurora	boolean	false	Auroraテーマだけに小さいボタンを作成します
fill	boolean	false	ボタンを塗りつぶした色にする
fill-ios	boolean	false	ボタンの塗りつぶし色をiOSテーマのみにします
fill-md	boolean	false	MDテーマのみボタンを塗りつぶした色にする
fill-aurora	boolean	false	Aurora テーマのみ，ボタンを塗りつぶした色にします
raised	boolean	false	ボタンを隆起させます。
raised-ios	boolean	false	iOSテーマでのみボタンを隆起させます。
raised-md	boolean	false	MDテーマでのみボタンを隆起させます。
raised-aurora	boolean	false	Aurora テーマでのみボタンを隆起させます
outline	boolean	false	ボタンのアウトライン化
outline-ios	boolean	false	iOSテーマでのみボタンの輪郭を作成します。
outline-md	boolean	false	ボタンのアウトラインを MD テーマのみにします
outline-aurora	boolean	false	ボタンのアウトラインを作成します Aurora テーマでのみ
<Button> preloader related properties
preloader	boolean	false	ボタンにプリローダを持たせる
loading	boolean	false	ボタンの状態を制御して、プリローダーの表示/非表示、ボタンテキストの表示/非表示を切り替えます（ボタンを読み込み状態に切り替えます）。
preloader-color	string		ボタンのプリローダの色
preloader-size	number string		ボタンのプリローダのサイズ
<f7-button> icon related properties
icon-size	string number		アイコンサイズ（px
icon-color	string		アイコンの色デフォルトカラーのうちの1つです。
icon	string		カスタムアイコンのクラス
icon-f7	string		F7アイコンのフォントアイコンの名前
icon-material	string		マテリアルアイコンのフォントアイコンの名称
icon-ios	string		iOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
icon-md	string		MDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、`material:home`など。
icon-aurora	string		Auroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。
<f7-button> navigation/router related properties
href	string boolean	#	ロードするページのURL。`href="false"`のブール値の場合は、`href`タグは追加されません。
target	string		リンク・ターゲット属性の値、例えば、`_blank`、`_self`など。
view	string		ページを読み込むためのViewのCSSセレクタ。または、現在のビューで読み込むための`current`。
external	boolean		Framework7のリンク・クリック・ハンドラのバイパスを有効にする
back	boolean		バックナビゲーションリンクを有効にする
open-in	string		モーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。`popup`、`loginScreen`、`sheet`、`popover`または`panel`とすることができる。
force	boolean		履歴の中の前のページを無視してページを強制的にロードする (`back` propと一緒に使用する)
reload-current	boolean		現在のアクティブなページの代わりに新しいページをリロードする
reload-previous	boolean		履歴の前のページをルートからの新しいページで置き換える
reload-all	boolean		新しいページをロードし、履歴とDOMからすべての前のページを削除する
reload-detail	boolean		マスター詳細ビューで詳細ページを再読み込みする
animate	boolean		ページのアニメーションを無効にする
transition	string		カスタムページトランジションの名前
ignore-cache	boolean		キャッシングを無視する
route-tab-id	string		Routable Tab id
route-props	object		対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
prevent-router	boolean	false	設定されている場合は、Framework7のルーターでは処理されません。
<f7-button> action related properties
panel-open	string boolean		クリック時に開くパネルのCSSセレクタ。または、DOM内に左または右のパネルしかない場合は、`left`または`right`になります。
panel-close	string boolean		クリックでパネルを閉じる
panel-toggle	string boolean		クリックされたときにパネルを閉じるかどうかのCSSセレクタ。また、DOMに左または右のパネルしかない場合には、`left`または`right`とすることができる。
actions-open	string boolean		クリックされたときに開くアクション・シートの CSS セレクタ
actions-close	string boolean		クリックされたときに閉じるアクション・シートのCSSセレクタを指定する。または、現在開いているアクションシートを閉じるためのブール値のプロパティ
popup-open	string boolean		クリック時に開くポップアップのCSSセレクタ
popup-close	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
popover-open	string boolean		クリックで開くポップオーバーのCSSセレクタ
popover-close	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
sheet-open	string boolean		クリックで開くシートモーダルのCSSセレクタ
sheet-close	string boolean		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
login-screen-open	string boolean		クリックしたときに開くログイン画面のCSSセレクタ
login-screen-close	string boolean		クリックされたときに閉じるログイン画面のCSSセレクタあるいは、現在開かれているログイン画面を閉じるためのboolean特性
sortable-enable	string boolean		クリックした際に有効となるソート可能なリストのCSSセレクタ
sortable-disable	string boolean		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
sortable-toggle	string boolean		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
searchbar-enable	string boolean		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
searchbar-disable	string boolean		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
searchbar-toggle	string boolean		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
searchbar-clear	string boolean		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
card-open	string boolean		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
card-close	string boolean		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
card-prevent-open	boolean		このプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
menu-close	boolean		クリックするとメニューのドロップダウンを閉じる

ボタンのイベント

Event	Description
<f7-button> events
click	Event will be triggered after click on a button

Examples

<template>
<f7-page>
  <f7-navbar title="Buttons"></f7-navbar>

  <f7-block-title>Usual Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button round>Round</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Fill Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button fill>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill round>Round</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Outline Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button outline>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button outline>Button</f7-button>
      </f7-col>
      <f7-col>
        <f7-button outline round>Round</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Raised Buttons</f7-block-title>
  <f7-block strong>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button raised>Button</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button raised fill>Fill</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button raised outline>Outline</f7-button>
      </f7-col>
    </f7-row>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button raised round>Round</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button raised fill round>Fill</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button raised outline round>Outline</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Segmented</f7-block-title>
  <f7-block strong>
    <f7-segmented raised tag="p">
      <f7-button>Button</f7-button>
      <f7-button>Button</f7-button>
      <f7-button active>Active</f7-button>
    </f7-segmented>
    <f7-segmented strong tag="p">
      <f7-button>Button</f7-button>
      <f7-button>Button</f7-button>
      <f7-button active>Active</f7-button>
    </f7-segmented>
    <f7-segmented tag="p">
      <f7-button outline>Outline</f7-button>
      <f7-button outline>Outline</f7-button>
      <f7-button outline active>Active</f7-button>
    </f7-segmented>
    <f7-segmented raised round tag="p">
      <f7-button round>Button</f7-button>
      <f7-button round>Button</f7-button>
      <f7-button round active>Active</f7-button>
    </f7-segmented>
    <f7-segmented round tag="p">
      <f7-button round outline>Outline</f7-button>
      <f7-button round outline>Outline</f7-button>
      <f7-button round outline active>Active</f7-button>
    </f7-segmented>
  </f7-block>

  <f7-block-title>Large Buttons</f7-block-title>
  <f7-block strong>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button large>Button</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large fill>Fill</f7-button>
      </f7-col>
    </f7-row>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button large raised>Raised</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large raised fill>Raised Fill</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Small Buttons</f7-block-title>
  <f7-block strong>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button large small>Button</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large small outline>Outline</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large small fill>Fill</f7-button>
      </f7-col>
    </f7-row>
    <f7-row tag="p">
      <f7-col tag="span">
        <f7-button large small round>Button</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large small outline round>Outline</f7-button>
      </f7-col>
      <f7-col tag="span">
        <f7-button large small fill round>Fill</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Preloader Button</f7-block-title>
  <f7-block strong>
    <f7-button fill preloader :loading="isLoading" @click="load"> Load </f7-button>
  </f7-block>

  <f7-block-title>Color Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button color="red">Red</f7-button>
      </f7-col>
      <f7-col>
        <f7-button color="green">Green</f7-button>
      </f7-col>
      <f7-col>
        <f7-button color="blue">Blue</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>

  <f7-block-title>Color Fill Buttons</f7-block-title>
  <f7-block strong>
    <f7-row>
      <f7-col>
        <f7-button fill color="red">Red</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill color="green">Green</f7-button>
      </f7-col>
      <f7-col>
        <f7-button fill color="blue">Blue</f7-button>
      </f7-col>
    </f7-row>
  </f7-block>
</f7-page>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isLoading = ref(false);
    const load = () => {
      if (isLoading.value) return;
      isLoading.value = true;
      setTimeout(() => {
        isLoading.value = false;
      }, 4000);
    };

    return {
      isLoading,
      load,
    };
  },
};
</script>