ボタン Vue コンポーネント

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

ボタンコンポーネント

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

f7-button - シングルボタン

ボタンのプロパティ

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

プロパティ	型	デフォルト	説明
<f7-button> プロパティ
type	文字列		`submit`、`button`、または`reset`のいずれかの場合、同じ`type`属性を持つ`<button>`要素としてレンダリングされます。
tab-link	文字列ブール値		タブリンクを有効にし、ターゲットタブのCSSセレクターを指定します（文字列として指定した場合）。
tab-link-active	ブール値	false	このタブリンクをアクティブにします。
active	ブール値	false	セグメントで使用する場合、このボタンをアクティブ状態にします。`tab-link-active`の代わりに使用してください。
text	文字列		ボタンのテキストラベル
tooltip	文字列		ボタンのホバー/押下時に表示するツールチップテキスト
tooltip-trigger	文字列	hover	ツールチップのトリガー（開く）方法を定義します。`hover`、`click`、または`manual`にすることができます。
round	ブール値	false	ボタンを丸くします。
round-ios	ブール値	false	iOSテーマのみでボタンを丸くします。
round-md	ブール値	false	MDテーマのみでボタンを丸くします。
large	ブール値	false	大きなボタンにします。
large-ios	ブール値	false	iOSテーマのみで大きなボタンにします。
large-md	ブール値	false	MDテーマのみで大きなボタンにします。
small	ブール値	false	小さなボタンにします。
small-ios	ブール値	false	iOSテーマのみで小さなボタンにします。
small-md	ブール値	false	MDテーマのみで小さなボタンにします。
fill	ブール値	false	ボタンを塗りつぶされた色にします。
fill-ios	ブール値	false	iOSテーマのみでボタンを塗りつぶされた色にします。
fill-md	ブール値	false	MDテーマのみでボタンを塗りつぶされた色にします。
tonal	ブール値	false	トーンスタイルのボタンにします。
tonal-ios	ブール値	false	iOSテーマのみでトーンスタイルのボタンにします。
tonal-md	ブール値	false	MDテーマのみでトーンスタイルのボタンにします。
raised	ブール値	false	ボタンを立体的にします。
raised-ios	ブール値	false	iOSテーマのみでボタンを立体的にします。
raised-md	ブール値	false	MDテーマのみでボタンを立体的にします。
outline	ブール値	false	ボタンをアウトラインにします。
outline-ios	ブール値	false	iOSテーマのみでボタンをアウトラインにします。
outline-md	ブール値	false	MDテーマのみでボタンをアウトラインにします。
<Button> プリローダー関連のプロパティ
preloader	ブール値	false	ボタンにプリローダーを表示します。
loading	ブール値	false	プリローダーの表示/非表示とボタンテキストの表示/非表示を制御します（ボタンをローディング状態に切り替えます）。
preloader-color	文字列		ボタンのプリローダーの色
preloader-size	数値文字列		ボタンのプリローダーのサイズ
<f7-button> アイコン関連のプロパティ
icon-size	文字列数値		px単位のアイコンサイズ
icon-color	文字列		デフォルトの色のいずれか。
icon	文字列		カスタムアイコンクラス
icon-f7	文字列		F7 Iconsフォントアイコンの名前
icon-material	文字列		Material Iconsフォントアイコンの名前
icon-ios	文字列		iOSテーマで使用されるアイコン。コロンで区切られたアイコンファミリーとアイコン名で構成されます（例：`f7:house`）。
icon-md	文字列		MDテーマで使用されるアイコン。コロンで区切られたアイコンファミリーとアイコン名で構成されます（例：`material:home`）。
<f7-button> ナビゲーション/ルーター関連のプロパティ
href	文字列ブール値	#	読み込むページのURL。ブール値`href="false"`の場合、`href`タグは追加されません。
target	文字列		リンクのtarget属性の値（例：`_blank`、`_self`など）。
view	文字列		ページを読み込むViewのCSSセレクター。または、現在のViewに読み込む場合は`current`。
external	ブール値		Framework7のリンククリックハンドラーをバイパスします。
back	ブール値		戻るナビゲーションリンクを有効にします。
open-in	文字列		ページルートをモーダルまたはパネルとして開きます。`popup`、`loginScreen`、`sheet`、`popover`、`panel`を指定できます。
force	ブール値		ページを強制的に読み込み、履歴の前のページを無視します（`back`プロパティと一緒に使用）。
reload-current	ブール値		現在アクティブなページの代わりに新しいページを再読み込みします。
reload-previous	ブール値		履歴の前のページをルートからの新しいページに置き換えます。
reload-all	ブール値		新しいページを読み込み、履歴とDOMから前のページをすべて削除します。
reload-detail	ブール値		マスター詳細ビューで詳細ページを再読み込みします。
animate	ブール値		ページアニメーションを無効にします。
transition	文字列		カスタムページ遷移の名前
ignore-cache	ブール値		キャッシュを無視します。
route-tab-id	文字列		ルーティング可能なタブID
route-props	オブジェクト		ターゲットルートコンポーネントに渡される追加のプロパティを含むオブジェクト
prevent-router	ブール値	false	設定されている場合、Framework7ルーターによって処理されません。
<f7-button> アクション関連のプロパティ
panel-open	文字列ブール値		クリック時に開くパネルのCSSセレクター。DOMに左パネルまたは右パネルのみがある場合は、`left`または`right`にすることもできます。
panel-close	文字列ブール値		クリック時にパネルを閉じます。
panel-toggle	文字列ブール値		クリック時に切り替えるパネルのCSSセレクター。DOMに左パネルまたは右パネルのみがある場合は、`left`または`right`にすることもできます。
actions-open	文字列ブール値		クリック時に開くアクションシートのCSSセレクター
actions-close	文字列ブール値		クリック時に閉じるアクションシートのCSSセレクター。または、現在開いているアクションシートを閉じるブール値のプロパティ。
popup-open	文字列ブール値		クリック時に開くポップアップのCSSセレクター
popup-close	文字列ブール値		クリック時に閉じるポップアップのCSSセレクター。または、現在開いているポップアップを閉じるブール値のプロパティ。
popover-open	文字列ブール値		クリック時に開くポップオーバーのCSSセレクター
popover-close	文字列ブール値		クリック時に閉じるポップオーバーのCSSセレクター。または、現在開いているポップオーバーを閉じるブール値のプロパティ。
sheet-open	文字列ブール値		クリック時に開くシートモーダルのCSSセレクター
sheet-close	文字列ブール値		クリック時に閉じるシートモーダルのCSSセレクター。または、現在開いているシートモーダルを閉じるブール値のプロパティ。
login-screen-open	文字列ブール値		クリック時に開くログイン画面のCSSセレクター
login-screen-close	文字列ブール値		クリック時に閉じるログイン画面のCSSセレクター。または、現在開いているログイン画面を閉じるブール値のプロパティ。
sortable-enable	文字列ブール値		クリック時に有効にするソート可能なリストのCSSセレクター
sortable-disable	文字列ブール値		クリック時に無効にするソート可能なリストのCSSセレクター。または、現在開いているソート可能なリストを閉じるブール値のプロパティ。
sortable-toggle	文字列ブール値		クリック時に切り替えるソート可能なリストのCSSセレクター。または、現在開いている/閉じているソート可能なリストを切り替えるブール値のプロパティ。
searchbar-enable	文字列ブール値		クリック時に有効にする展開可能な検索バーのCSSセレクター。または、最初に検出された検索バーを有効にするブール値のプロパティ。
searchbar-disable	文字列ブール値		クリック時に無効にする展開可能な検索バーのCSSセレクター。または、最初に検出された検索バーを無効にするブール値のプロパティ。
searchbar-toggle	文字列ブール値		クリック時に切り替える展開可能な検索バーのCSSセレクター。または、最初に検出された検索バーを切り替えるブール値のプロパティ。
searchbar-clear	文字列ブール値		クリック時にクリアする展開可能な検索バーのCSSセレクター。または、最初に検出された検索バーをクリアするブール値のプロパティ。
card-open	文字列ブール値		クリック時に開く展開可能なカードのCSSセレクター。または、最初に検出された展開可能なカードを開くブール値。
card-close	文字列ブール値		クリック時に閉じる展開可能なカードのCSSセレクター。または、現在開いている展開可能なカードを閉じるブール値のプロパティ。
card-prevent-open	ブール値		このプロパティを持つ要素をクリックしても、親の展開可能なカードは開きません。

ボタンイベント

イベント	説明
<f7-button> イベント
click	ボタンをクリックした後、イベントがトリガーされます。

例

buttons.vue

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

    <f7-block-title>Usual Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button>Button</f7-button>
        <f7-button>Button</f7-button>
        <f7-button round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Tonal Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button tonal>Button</f7-button>
        <f7-button tonal>Button</f7-button>
        <f7-button tonal round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Fill Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button fill>Button</f7-button>
        <f7-button fill>Button</f7-button>
        <f7-button fill round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Outline Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button outline>Button</f7-button>
        <f7-button outline>Button</f7-button>
        <f7-button outline round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Raised Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button raised>Button</f7-button>
        <f7-button raised fill>Fill</f7-button>
        <f7-button raised outline>Outline</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button raised round>Round</f7-button>
        <f7-button raised fill round>Fill</f7-button>
        <f7-button raised outline round>Outline</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Large Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button large>Button</f7-button>
        <f7-button large fill>Fill</f7-button>
      </p>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button large raised>Raised</f7-button>
        <f7-button large raised fill>Raised Fill</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Small Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button small>Button</f7-button>
        <f7-button small outline>Outline</f7-button>
        <f7-button small fill>Fill</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button small round>Button</f7-button>
        <f7-button small outline round>Outline</f7-button>
        <f7-button small fill round>Fill</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Preloader Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button preloader :loading="isLoading1" large @click="load1"> Load </f7-button>
        <f7-button preloader :loading="isLoading2" large fill @click="load2"> Load </f7-button>
      </p>
    </f7-block>

    <f7-block-title>Color Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button color="red">Red</f7-button>
        <f7-button color="green">Green</f7-button>
        <f7-button color="blue">Blue</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Color Fill Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button color="red">Red</f7-button>
        <f7-button color="green">Green</f7-button>
        <f7-button color="blue">Blue</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button color="pink">Pink</f7-button>
        <f7-button color="yellow">Yellow</f7-button>
        <f7-button color="orange">Orange</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button color="black">Black</f7-button>
        <f7-button color="white">White</f7-button>
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { ref } from 'vue';
import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Button } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Block,
    f7Button,
  },
  setup() {
    const isLoading1 = ref(false);
    const isLoading2 = ref(false);

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

    const load2 = () => {
      if (isLoading2.value) return;
      isLoading2.value = true;
      setTimeout(() => {
        isLoading2.value = false;
      }, 4000);
    };

    return {
      isLoading1,
      isLoading2,
      load1,
      load2,
    };
  },
};
</script>

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

このページで

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