ボタン Svelte コンポーネント

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

ボタンコンポーネント

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

Button - 単一のボタン

ボタンのプロパティ

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

プロパティ	タイプ	デフォルト	説明
<Button> プロパティ
type	string		これが `submit`、`button`、または `reset` のいずれかの場合、同じ `type` 属性を持つ `<button>` 要素としてレンダリングされます。
tabLink	string boolean		タブリンクを有効にし、ターゲットタブの CSS セレクターを指定します (文字列として指定された場合)。
tabLinkActive	boolean	false	このタブリンクをアクティブにします。
active	boolean	false	セグメントで使用する場合、このボタンをアクティブ状態にします。 `tab-link-active` の代わりに使用する必要があります。
text	string		ボタンのテキストラベル
tooltip	string		ボタンのホバー/プレス時に表示されるボタンツールチップテキスト
tooltipTrigger	string	hover	ツールチップをトリガー (開く) 方法を定義します。 `hover`、`click`、または `manual` を指定できます。
round	boolean	false	ボタンを丸くします。
roundIos	boolean	false	iOS テーマの場合のみボタンを丸くします。
roundMd	boolean	false	MD テーマの場合のみボタンを丸くします。
large	boolean	false	大きなボタンにします。
largeIos	boolean	false	iOS テーマの場合のみ大きなボタンにします。
largeMd	boolean	false	MD テーマの場合のみ大きなボタンにします。
small	boolean	false	小さなボタンにします。
smallIos	boolean	false	iOS テーマの場合のみ小さなボタンにします。
smallMd	boolean	false	MD テーマの場合のみ小さなボタンにします。
fill	boolean	false	塗りつぶされた色のボタンにします。
fillIos	boolean	false	iOS テーマの場合のみ塗りつぶされた色のボタンにします。
fillMd	boolean	false	MD テーマの場合のみ塗りつぶされた色のボタンにします。
tonal	boolean	false	トナルスタイルのボタンにします。
tonalIos	boolean	false	iOS テーマの場合のみトナルスタイルのボタンにします。
tonalMd	boolean	false	MD テーマの場合のみトナルスタイルのボタンにします。
raised	boolean	false	ボタンを隆起させます。
raisedIos	boolean	false	iOS テーマの場合のみボタンを隆起させます。
raisedMd	boolean	false	MD テーマの場合のみボタンを隆起させます。
outline	boolean	false	ボタンをアウトラインにします。
outlineIos	boolean	false	iOS テーマの場合のみボタンをアウトラインにします。
outlineMd	boolean	false	MD テーマの場合のみボタンをアウトラインにします。
<Button> プリローダー関連のプロパティ
preloader	boolean	false	ボタンにプリローダーを表示できるようにします。
loading	boolean	false	プリローダーの表示/非表示とボタンテキストの表示/非表示を切り替えるボタンの状態を制御します (ボタンをロード状態に切り替えます)。
preloaderColor	string		ボタンのプリローダーの色
preloaderSize	number string		ボタンのプリローダーのサイズ
<Button> アイコン関連のプロパティ
iconSize	string number		アイコンサイズ (px)
iconColor	string		アイコンの色。デフォルトカラーのいずれか
icon	string		カスタムアイコンクラス
iconF7	string		F7 アイコンフォントアイコンの名前
iconMaterial	string		マテリアルアイコンフォントアイコンの名前
iconIos	string		iOS テーマが使用されている場合に使用されるアイコン。コロンで区切られたアイコンファミリーとアイコン名で構成されます。例: `f7:house`
iconMd	string		MD テーマが使用されている場合に使用されるアイコン。コロンで区切られたアイコンファミリーとアイコン名で構成されます。例: `material:home`
<Button> ナビゲーション/ルーター関連のプロパティ
href	string boolean	#	ロードするページの URL。ブール値 `href="false"` の場合、`href` タグは追加されません。
target	string		リンクターゲット属性の値。例: `_blank`、`_self` など
view	string		ページをロードするビューの CSS セレクター。または、現在のビューにロードする場合は `current`。
external	boolean		Framework7 のリンククリックハンドラーをバイパスできるようにします。
back	boolean		戻るナビゲーションリンクを有効にします。
openIn	string		ページルートをモーダルまたはパネルとして開くことができます。 `popup`、`loginScreen`、`sheet`、`popover`、または `panel` を指定できます。
force	boolean		ページを強制的にロードし、履歴の前のページを無視します (`back` プロパティと組み合わせて使用します)。
reloadCurrent	boolean		現在アクティブなページの代わりに新しいページをリロードします。
reloadPrevious	boolean		履歴の前のページをルートからの新しいページに置き換えます。
reloadAll	boolean		新しいページをロードし、履歴と DOM から以前のすべてのページを削除します。
reloadDetail	boolean		マスター詳細ビューの詳細ページをリロードします。
animate	boolean		ページアニメーションを無効にします。
transition	string		カスタムページトランジションの名前
ignoreCache	boolean		キャッシュを無視します。
routeTabId	string		ルーティング可能なタブ ID
routeProps	object		ターゲットルートコンポーネントに渡される追加のプロパティを含むオブジェクト
preventRouter	boolean	false	設定されている場合、Framework7 ルーターによって処理されません。
<Button> アクション関連のプロパティ
panelOpen	string boolean		クリック時に開くパネルの CSS セレクター。DOM に左右のパネルしかない場合は、`left` または `right` にすることができます。
panelClose	string boolean		クリック時にパネルを閉じます。
panelToggle	string boolean		クリック時に切り替えるパネルの CSS セレクター。DOM に左右のパネルしかない場合は、`left` または `right` にすることができます。
actionsOpen	string boolean		クリック時に開くアクションシートの CSS セレクター
actionsClose	string boolean		クリック時に閉じるアクションシートの CSS セレクター。または、現在開いているアクションシートを閉じるブール値プロパティ。
popupOpen	string boolean		クリック時に開くポップアップの CSS セレクター
popupClose	string boolean		クリック時に閉じるポップアップの CSS セレクター。または、現在開いているポップアップを閉じるブール値プロパティ。
popoverOpen	string boolean		クリック時に開くポップオーバーの CSS セレクター
popoverClose	string boolean		クリック時に閉じるポップオーバーの CSS セレクター。または、現在開いているポップオーバーを閉じるブール値プロパティ。
sheetOpen	string boolean		クリック時に開くシートモーダルの CSS セレクター
sheetClose	string boolean		クリック時に閉じるシートモーダルの CSS セレクター。または、現在開いているシートモーダルを閉じるブール値プロパティ。
loginScreenOpen	string boolean		クリック時に開くログイン画面の CSS セレクター
loginScreenClose	string boolean		クリック時に閉じるログイン画面の CSS セレクター。または、現在開いているログイン画面を閉じるブール値プロパティ。
sortableEnable	string boolean		クリック時に有効にするソータブルリストの CSS セレクター
sortableDisable	string boolean		クリック時に無効にするソータブルリストの CSS セレクター。または、現在開いているソータブルリストを閉じるブール値プロパティ。
sortableToggle	string boolean		クリック時に切り替えるソータブルリストの CSS セレクター。または、現在開いている/閉じているソータブルリストを切り替えるブール値プロパティ。
searchbarEnable	string boolean		クリック時に有効にする拡張可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーを有効にするブール値プロパティ。
searchbarDisable	string boolean		クリック時に無効にする拡張可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーを無効にするブール値プロパティ。
searchbarToggle	string boolean		クリック時に切り替える拡張可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーを切り替えるブール値プロパティ。
searchbarClear	string boolean		クリック時にクリアする拡張可能なサーチバーの CSS セレクター。または、最初に見つかったサーチバーをクリアするブール値プロパティ。
cardOpen	string boolean		クリック時に開く拡張可能なカードの CSS セレクター。または、最初に見つかった拡張可能なカードを開くブール値。
cardClose	string boolean		クリック時に閉じる拡張可能なカードの CSS セレクター。または、現在開いている拡張可能なカードを閉じるブール値プロパティ。
cardPreventOpen	boolean		このプロパティを持つ要素をクリックしても、親の拡張可能なカードは開きません。

ボタンイベント

イベント	説明
<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>

このドキュメントの改善

このページについて

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