フローティング・アクション・ボタン Vueコンポーネント

フローティング・アクション・ボタン(FAB)は、促進されるアクションに使用されます。丸いアイコンがUIの上に浮かんでいるのが特徴で、モーフィング、起動、アンカーポイントの移動などの動作をします。

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

FABコンポーネント

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

f7-fab - メインのFAB要素
f7-fab-buttons - 短縮ダイヤルFABとして使用される複数のFABボタンのラッパー
f7-fab-button - 単一の FAB スピードダイアルボタン
f7-fab-backdrop - FABの背景要素

FAB のプロパティ

Prop	Type	Default	Description
<f7-fab> properties
href	string boolean		ロードするページの URL（設定されている場合）。メイン FAB リンクの `href` 属性を設定します。href="false"`というブーリアン値の場合は、`href` タグは追加されません。
target	string		リンクのターゲット属性の値、例えば `_blank`, `_self` など。
position	string	right-bottom	FABの位置。以下のいずれかになります。 `right-bottom` (右下) 中央-下端左下 `right-center` (中央) 中央-中央左中央 `right-top` （右上）。センタートップ `left-top` (左上)
morph-to	string		文字列 FAB モーフターゲットの CSS セレクタ
text	string		FABボタンのテキストです。指定された場合は、テキストラベル付きの拡張Fabとして表示されます。
tooltip	string		FAB tooltip ボタンのホバー/プレス時に表示するテキストです。
tooltip-trigger	string	hover	どのようにしてTooltipを開くかを定義します。hover`,` click`,` manual` のいずれかです。
<f7-fab-buttons> properties
position	string	top	スピードダイヤルボタンの位置、以下のいずれかになります。 `top` - ボタンは、FABの上部に表示されます。 `right` - ボタンは、FABの右側に表示されます。 `bottom` - FABの下部に表示されます。 `left` - FABの左にボタンが表示されます。 `center` - FABの周囲にボタンが表示されます。
<f7-fab-button> properties
fab-close	boolean	false	有効にすると、このボタンをクリックすると、FABを閉じます。
target	string		リンクのターゲット属性の値、例： `_blank`, `_self` など
label	string		ボタンのテキストラベル
tooltip	string		ボタンのホバー/プレス時に表示されるtooltipのテキストです。
tooltip-trigger	string	hover	どのようにしてTooltipを開くかを定義します。hover`,` click`,` manual` のいずれかです。

FABイベント

Event	Description
<f7-fab> events
click	FABをクリックすると、イベントが発生します。
<f7-fab-button> events
click	FABスピードダイヤルボタンをクリックすると、イベントが発生します。

FABスロット

FABのVueコンポーネント(<f7-fab>)には、カスタムエレメント用の追加スロットがあります。

default - メインのFABリンク <a> 要素の中に子要素が挿入されます。default - 子要素はメインの FAB リンク 要素の内側に挿入されますが、子要素が f7-fab-buttons` の場合は、メインの FAB 要素の最後に挿入されます。
link - 子要素は、メインのFABリンク <a> 要素の内側に挿入されます。
root - 子要素はメインのFAB要素の最後に挿入されます。
text - 子要素が拡張FABのテキスト要素に挿入されます。

Examples

<template>
<f7-page>
  <f7-navbar title="Floating Action Button"></f7-navbar>

  <!-- Toolbar FAB Morph Target -->
  <f7-toolbar bottom class="fab-morph-target">
    <f7-link>Link 1</f7-link>
    <f7-link>Link 2</f7-link>
    <f7-link>Link 3</f7-link>
  </f7-toolbar>

  <template #fixed>
    <!-- FAB Left Top (Yellow) -->
    <f7-fab position="left-top" color="yellow">
      <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
      <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
      <f7-fab-buttons position="bottom">
        <f7-fab-button>1</f7-fab-button>
        <f7-fab-button>2</f7-fab-button>
        <f7-fab-button>3</f7-fab-button>
      </f7-fab-buttons>
    </f7-fab>

    <!-- FAB Right Top (Pink) -->
    <f7-fab position="right-top" color="pink">
      <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
      <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
      <f7-fab-buttons position="left">
        <f7-fab-button>1</f7-fab-button>
        <f7-fab-button>2</f7-fab-button>
        <f7-fab-button>3</f7-fab-button>
      </f7-fab-buttons>
    </f7-fab>

    <!-- FAB Center (Green) -->
    <f7-fab position="center-center" color="green">
      <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
      <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
      <f7-fab-buttons position="center">
        <f7-fab-button>1</f7-fab-button>
        <f7-fab-button>2</f7-fab-button>
        <f7-fab-button>3</f7-fab-button>
        <f7-fab-button>4</f7-fab-button>
      </f7-fab-buttons>
    </f7-fab>

    <!-- FAB Left Bottom (Blue) -->
    <!-- Will morph to Toolbar -->
    <f7-fab position="left-bottom" morph-to=".toolbar.fab-morph-target">
      <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
      <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
    </f7-fab>

    <!-- FAB Right Bottom (Orange) -->
    <f7-fab position="right-bottom" color="orange">
      <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
      <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
      <f7-fab-buttons position="top">
        <f7-fab-button label="Action 1">1</f7-fab-button>
        <f7-fab-button label="Action 2">2</f7-fab-button>
      </f7-fab-buttons>
    </f7-fab>

    <!-- Extended FAB Center Bottom (Red) -->
    <f7-fab position="center-bottom" text="Create" color="red">
      <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
    </f7-fab>
  </template>

  <f7-block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
    <p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
    <p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
    <p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
    <p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
  </f7-block>
  <f7-block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
    <p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
    <p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
    <p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
    <p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
    <p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
    <p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
  </f7-block>
</f7-page>
</template>

With Backdrop

<template>
<f7-page>
  <f7-navbar title="FAB Backdrop"></f7-navbar>

  <template #fixed>
    <!-- FAB Backdrop -->
    <f7-fab-backdrop></f7-fab-backdrop>

    <!-- FAB Right Bottom -->
    <f7-fab position="right-bottom">
      <f7-icon ios="f7:plus" aurora="f7:plus" md="material:add"></f7-icon>
      <f7-icon ios="f7:xmark" aurora="f7:xmark" md="material:close"></f7-icon>
      <f7-fab-buttons position="top">
        <f7-fab-button label="Action 1">1</f7-fab-button>
        <f7-fab-button label="Action 2">2</f7-fab-button>
      </f7-fab-buttons>
    </f7-fab>
  </template>

  <f7-block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
    <p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
    <p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
    <p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
    <p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
  </f7-block>
  <f7-block>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
    <p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
    <p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
    <p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
    <p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
    <p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
    <p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
  </f7-block>
</f7-page>
</template>