Button Svelte コンポーネント

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

ボタンコンポーネント

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

Button - シングルボタン
Segmented - ボタンのセグメント化されたラッパー

ボタンのプロパティ

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

Prop	Type	Default	Description
<Segmented> properties
raised	boolean	false	セグメント化されたボタンを作成します。
raisedIos	boolean	false	iOSテーマでのみ、セグメント化して表示します。
raisedMd	boolean	false	MD テーマでのみ、セグメント化された状態で表示されます。
raisedAurora	boolean	false	Aurora テーマでのみ、セグメント化された盛り上がりを作る
round	boolean	false	セグメント化された円形にする
roundIos	boolean	false	iOSテーマでのみセグメント化されたラウンド型にする
roundMd	boolean	false	MDテーマのみでセグメント化された丸型にする
roundAurora	boolean	false	Aurora」テーマで、「Segmented Round」のみを作成
strong	boolean	false	強烈なセグメンテーションにする
strongIos	boolean	false	iOSテーマでのみ、強力なセグメント化を行う
strongMd	boolean	false	MDテーマでのみ「強力な分割」を行う
strongAurora	boolean	false	Auroraテーマでのみ強く分割します。
tag	string	div	セグメント化された要素のレンダリングに使用されるタグです。`div` または `p` のいずれかです。
<Button> properties
type	string		submit`,` button`,` reset `のいずれかであれば、同じ` type `属性を持つ`
tabLink	string boolean		タブリンクを有効にし、対象となるタブの CSS セレクタを指定します（文字列で指定する場合）。
tabLinkActive	boolean	false	このタブリンクをアクティブにします。
active	boolean	false	セグメント化されている場合、このボタンをアクティブにします。tab-link-active` の代わりに使用する必要があります。
text	string		ボタンのテキストラベル
tooltip	string		ボタンの tooltip テキストを表示します。
tooltipTrigger	string	hover	どのようにしてツールチップを開くかを定義します。hover`,` click`,` manual` のいずれかです。
round	boolean	false	ボタンを丸くする
roundIos	boolean	false	iOSテーマのみ、ボタンを丸くします。
roundMd	boolean	false	MD テーマのみ、ボタンを丸くします。
roundAurora	boolean	false	Aurora テーマでのみ、ボタンを丸くします。
large	boolean	false	大きいボタンの作成
largeIos	boolean	false	iOSテーマのみに大きなボタンを作成します
largeMd	boolean	false	MDテーマのみに大きなボタンを作成
largeAurora	boolean	false	Auroraテーマのみに大きなボタンを作成します
small	boolean	false	小さいボタンを作成
smallIos	boolean	false	iOSテーマのみに小さなボタンを作成します。
smallMd	boolean	false	MDテーマのみに小さいボタンを作成
smallAurora	boolean	false	Auroraテーマだけに小さいボタンを作成します
fill	boolean	false	ボタンを塗りつぶした色にする
fillIos	boolean	false	ボタンの塗りつぶし色をiOSテーマのみにします
fillMd	boolean	false	MDテーマのみボタンを塗りつぶした色にする
fillAurora	boolean	false	Aurora テーマのみ，ボタンを塗りつぶした色にします
raised	boolean	false	ボタンを隆起させます。
raisedIos	boolean	false	iOSテーマでのみボタンを隆起させます。
raisedMd	boolean	false	MDテーマでのみボタンを隆起させます。
raisedAurora	boolean	false	Aurora テーマでのみボタンを隆起させます
outline	boolean	false	ボタンのアウトライン化
outlineIos	boolean	false	iOSテーマでのみボタンの輪郭を作成します。
outlineMd	boolean	false	ボタンのアウトラインを MD テーマのみにします
outlineAurora	boolean	false	ボタンのアウトラインを作成します Aurora テーマでのみ
<Button> preloader related properties
preloader	boolean	false	ボタンにプリローダを持たせる
loading	boolean	false	ボタンの状態を制御して、プリローダーの表示/非表示、ボタンテキストの表示/非表示を切り替えます（ボタンを読み込み状態に切り替えます）。
preloaderColor	string		ボタンのプリローダの色
preloaderSize	number string		ボタンのプリローダのサイズ
<Button> icon related properties
iconSize	string number		アイコンサイズ(px)
iconColor	string		アイコンの色デフォルトカラーのうちの1つです。
icon	string		カスタムアイコンのクラス
iconF7	string		F7アイコンのフォントアイコンの名前
iconMaterial	string		マテリアルアイコンのフォントアイコンの名称
iconIos	string		iOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
iconMd	string		MDテーマを使用する場合のアイコンです。アイコンファミリーとアイコン名をコロンで区切ったもの、例えば、`material:home`など。
iconAurora	string		Auroraテーマを使用する場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったものです。
<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		バックナビゲーションリンクを有効にする
openIn	string		モーダルまたはパネルとしてのオープン・ページ・ルートを可能にする。`popup`、`loginScreen`、`sheet`、`popover`または`panel`とすることができる。
force	boolean		履歴の中の前のページを無視してページを強制的にロードする (`back` propと一緒に使用する)
reloadCurrent	boolean		現在のアクティブなページの代わりに新しいページをリロードする
reloadPrevious	boolean		履歴の前のページをルートからの新しいページで置き換える
reloadAll	boolean		新しいページをロードし、履歴とDOMからすべての前のページを削除する
reloadDetail	boolean		マスター詳細ビューで詳細ページを再読み込みする
animate	boolean		ページのアニメーションを無効にする
transition	string		カスタムページトランジションの名前
ignoreCache	boolean		キャッシングを無視する
routeTabId	string		Routable Tab id
routeProps	object		対象となるルートコンポーネントに渡される追加のプロップを持つオブジェクト。
preventRouter	boolean	false	設定されている場合は、Framework7のルーターでは処理されません。
<Button> action related properties
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セレクタ。または、現在開かれているポップアップを閉じるためのboolean特性
popoverOpen	string boolean		クリックで開くポップオーバーのCSSセレクタ
popoverClose	string boolean		クリックにより閉じるポップアップのCSSセレクタ。または、現在開かれているポップオーバーを閉じるためのboolean特性
sheetOpen	string boolean		クリックで開くシートモーダルのCSSセレクタ
sheetClose	string boolean		クリックにより閉じるシート・モーダルのCSSセレクタ。または、現在開かれているシートモーダルを閉じるためのboolean特性
loginScreenOpen	string boolean		クリックしたときに開くログイン画面のCSSセレクタ
loginScreenClose	string boolean		クリックされたときに閉じるログイン画面のCSSセレクタあるいは、現在開かれているログイン画面を閉じるためのboolean特性
sortableEnable	string boolean		クリックした際に有効となるソート可能なリストのCSSセレクタ
sortableDisable	string boolean		クリックした際に無効となるソート可能なリストのCSSセレクタ。あるいは、現在開かれているソート可能リストを閉じるためのboolean特性
sortableToggle	string boolean		クリックした際に切り替えられるソート可能リストのCSSセレクタ。あるいは、現在開かれている／閉じられているソート可能なリストをトグルするためのboolean特性
searchbarEnable	string boolean		クリックした際に有効となる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを有効にするためのboolean特性
searchbarDisable	string boolean		クリックすると無効になる拡張可能な検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーを無効にするためのboolean特性
searchbarToggle	string boolean		クリックしたときに切り替えられる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをトグルするためのboolean特性
searchbarClear	string boolean		クリックするとクリアされる拡張検索バーのCSSセレクタ。あるいは、最初に見つかった検索バーをクリアするためのboolean特性
cardOpen	string boolean		クリックしたときに開く拡張カードのCSSセレクタ。あるいは、最初に見つかった拡張カードを開くためのブール値
cardClose	string boolean		クリックした際に閉じる拡張カードのCSSセレクタ。または、現在開かれている拡張カードを閉じるためのboolean型プロパティ
cardPreventOpen	boolean		このプロパティを持つ要素をクリックしても、その親の拡張カードは開きません。
menuClose	boolean		クリックするとメニューのドロップダウンを閉じる

ボタンイベント

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

Examples

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

  <BlockTitle>Usual Buttons</BlockTitle>
  <Block strong>
    <Row>
      <Col>
        <Button>Button</Button>
      </Col>
      <Col>
        <Button>Button</Button>
      </Col>
      <Col>
        <Button round>Round</Button>
      </Col>
    </Row>
  </Block>

  <BlockTitle>Fill Buttons</BlockTitle>
  <Block strong>
    <Row>
      <Col>
        <Button fill>Button</Button>
      </Col>
      <Col>
        <Button fill>Button</Button>
      </Col>
      <Col>
        <Button fill round>Round</Button>
      </Col>
    </Row>
  </Block>

  <BlockTitle>Outline Buttons</BlockTitle>
  <Block strong>
    <Row>
      <Col>
        <Button outline>Button</Button>
      </Col>
      <Col>
        <Button outline>Button</Button>
      </Col>
      <Col>
        <Button outline round>Round</Button>
      </Col>
    </Row>
  </Block>

  <BlockTitle>Raised Buttons</BlockTitle>
  <Block strong>
    <Row tag="p">
      <Col tag="span">
        <Button raised>Button</Button>
      </Col>
      <Col tag="span">
        <Button raised fill>Fill</Button>
      </Col>
      <Col tag="span">
        <Button raised outline>Outline</Button>
      </Col>
    </Row>
    <Row tag="p">
      <Col tag="span">
        <Button raised round>Round</Button>
      </Col>
      <Col tag="span">
        <Button raised fill round>Fill</Button>
      </Col>
      <Col tag="span">
        <Button raised outline round>Outline</Button>
      </Col>
    </Row>
  </Block>

  <BlockTitle>Segmented</BlockTitle>
  <Block strong>
    <Segmented raised tag="p">
      <Button>Button</Button>
      <Button>Button</Button>
      <Button active>Active</Button>
    </Segmented>
    <Segmented strong tag="p">
      <Button>Button</Button>
      <Button>Button</Button>
      <Button active>Active</Button>
    </Segmented>
    <Segmented tag="p">
      <Button outline>Outline</Button>
      <Button outline>Outline</Button>
      <Button outline active>Active</Button>
    </Segmented>
    <Segmented raised round tag="p">
      <Button round>Button</Button>
      <Button round>Button</Button>
      <Button round active>Active</Button>
    </Segmented>
    <Segmented round tag="p">
      <Button round outline>Outline</Button>
      <Button round outline>Outline</Button>
      <Button round outline active>Active</Button>
    </Segmented>
  </Block>

  <BlockTitle>Large Buttons</BlockTitle>
  <Block strong>
    <Row tag="p">
      <Col tag="span">
        <Button large>Button</Button>
      </Col>
      <Col tag="span">
        <Button large fill>Fill</Button>
      </Col>
    </Row>
    <Row tag="p">
      <Col tag="span">
        <Button large raised>Raised</Button>
      </Col>
      <Col tag="span">
        <Button large raised fill>Raised Fill</Button>
      </Col>
    </Row>
  </Block>

  <BlockTitle>Small Buttons</BlockTitle>
  <Block strong>
    <Row tag="p">
      <Col tag="span">
        <Button large small>Button</Button>
      </Col>
      <Col tag="span">
        <Button large small outline>Outline</Button>
      </Col>
      <Col tag="span">
        <Button large small fill>Fill</Button>
      </Col>
    </Row>
    <Row tag="p">
      <Col tag="span">
        <Button large small round>Button</Button>
      </Col>
      <Col tag="span">
        <Button large small outline round>Outline</Button>
      </Col>
      <Col tag="span">
        <Button large small fill round>Fill</Button>
      </Col>
    </Row>
  </Block>

  <BlockTitle>Preloader Button</BlockTitle>
  <Block strong>
    <Button fill preloader loading={isLoading} onClick={load}>
      Load
    </Button>
  </Block>

  <BlockTitle>Color Buttons</BlockTitle>
  <Block strong>
    <Row>
      <Col>
        <Button color="red">Red</Button>
      </Col>
      <Col>
        <Button color="green">Green</Button>
      </Col>
      <Col>
        <Button color="blue">Blue</Button>
      </Col>
    </Row>
  </Block>

  <BlockTitle>Color Fill Buttons</BlockTitle>
  <Block strong>
    <Row>
      <Col>
        <Button fill color="red">Red</Button>
      </Col>
      <Col>
        <Button fill color="green">Green</Button>
      </Col>
      <Col>
        <Button fill color="blue">Blue</Button>
      </Col>
    </Row>
  </Block>
</Page>
  

<script>
  import {Page, Navbar, BlockTitle, Block, Row, Col, Button, Segmented} from 'framework7-svelte';

  let isLoading = false;

  const load = () => {
    if (isLoading) return;
    isLoading = true;
    setTimeout(() => {
      isLoading = false;
    }, 4000);
  };
</script>