フローティングアクションボタン

フローティングアクションボタン（FAB）は、強調されたアクションに使用されます。UIの上に浮遊する丸いアイコンで区別され、モーフィング、起動、およびアンカーポイントの転送を含むモーション動作があります。

FABレイアウト

フローティングアクションボタンのレイアウトは非常に簡単です。pageまたはviewの直下の子として配置するだけです

<!-- Page-->
<div class="page">
  <!-- Navbar-->
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="center">Floating Action Button</div>
    </div>
  </div>
  <!-- Floating Action Button -->
  <div class="fab fab-right-bottom">
    <a href="#">
      <i class="icon f7-icons">plus</i>
    </a>
  </div>
  <!-- Another Floating Action Button -->
  <div class="fab fab-left-bottom">
    <a href="#">
      <i class="icon f7-icons">plus</i>
    </a>
  </div>
  <!-- Scrollable Page Content-->
  <div class="page-content">
    <div class="block">
      Lorem ipsum dolor sit amet, ....
    </div>
  </div>
</div>

FABの位置は、追加のfab-[horizontal]-[vertical]クラスを使用して構成されます。次のクラスが使用可能です

fab-right-bottom
fab-center-bottom
fab-left-bottom
fab-right-center
fab-center-center
fab-left-center
fab-right-top
fab-center-top
fab-left-top

FABの色

FABはすべてのデフォルトの色をサポートします。色を変更するには、FAB要素にcolor-[color]クラスを追加するだけです。

<!-- Red FAB -->
<div class="fab fab-left-top color-red"></div>

<!-- Green FAB -->
<div class="fab fab-right-bottom color-green"></div>

拡張FAB

拡張FABは幅が広く、テキストラベルが含まれています。拡張FABを作成するには、FAB要素に追加のfab-extendedクラスを追加し、その追加テキストを内部の<div class="fab-text">要素に入れます

<!-- Additional fab-extended class -->
<div class="fab fab-extended fab-center-bottom">
  <a href="#">
    <i class="icon f7-icons">plus</i>
    <!-- Element with FAB text  -->
    <div class="fab-text">Create</div>
  </a>
</div>

スピードダイヤル

フローティングアクションボタンは、押すと関連アクションをフリングアウトできます。ボタンは、メニューが呼び出された後も画面上に残っている必要があります。同じ場所をタップすると、最も一般的に使用されるアクションがアクティブになるか、開いているメニューが閉じられるかのいずれかになります。

この場合、ボタン付きの追加要素を追加する必要があります

<div class="fab fab-right-bottom">
  <a href="#">
    <!-- First icon is visible when Speed Dial actions are closed -->
    <i class="icon f7-icons">plus</i>
    <!-- Second icon is visible when Speed Dial actions are opened -->
    <i class="icon f7-icons">xmark</i>
  </a>
  <!-- Speed Dial action buttons -->
  <div class="fab-buttons fab-buttons-bottom">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</div>

スピードダイヤルボタンコンテナの位置は、追加のクラスを使用して構成されます

fab-buttons-top - ボタンはFABの上に表示されます
fab-buttons-right - ボタンはFABの右側に表示されます
fab-buttons-bottom - ボタンはFABの下に表示されます
fab-buttons-left - ボタンはFABの左側に表示されます
fab-buttons-center - ボタンはFABの周囲に表示されます

スピードダイヤルアクションボタンは逆順で表示されることに注意してください
6つ以上のスピードダイヤルアクションを使用しないでください
少なくとも3つのスピードダイヤルアクションを使用する必要があります

ラベル付きスピードダイヤル

スピードダイヤルボタンは、追加のテキストラベルもサポートしています。この場合、レイアウトは少し拡張されます

<div class="fab-buttons fab-buttons-bottom">
  <!-- additional "fab-label-button" class on fab button -->
  <a href="#" class="fab-label-button">
    <!-- original button content -->
    <span>1</span>
    <!-- button label -->
    <span class="fab-label">Action 1</span>
  </a>
  <a href="#" class="fab-label-button">
    <span>2</span>
    <span class="fab-label">Action 2</span>
  </a>
  ...
</div>

背景付きスピードダイヤル

FABの背後に、FABが開いたときに表示される背景（半透明のオーバーレイ）を追加することも可能です。

これを機能させるには、FAB要素と同じレベルに背景要素を追加するだけです

<div class="page">
  <!-- FAB backdrop -->
  <div class="fab-backdrop"></div>

  <!-- FAB -->
  <div class="fab fab-right-bottom">
    ...
  </div>

  <div class="page-content">
    ...
  </div>
</div>

FABモーフィング

FABをページ上の任意の表示要素にモーフィングする機能もあります。

<div class="page">
  <div class="navbar">...</div>

  <!-- Toolbar has additional required "fab-morph-target" class -->
  <div class="toolbar toolbar-bottom fab-morph-target">
    ...
  </div>

  <!-- FAB will morph to toolbar -->
  <div class="fab fab-morph" data-morph-to=".toolbar">
    <i class="icon f7-icons">plus</i>
  </div>

  <div class="page-content">
    ...
  </div>
</div>

どこで

data-morph-to - ターゲット要素のCSSセレクターを指定する必要があるFABの追加属性。この例では、ツールバーを指しています
fab-morph-target - FABモーフィングターゲットの追加の必須クラス。この例ではツールバーに追加されています

FABアプリメソッド

次のアプリメソッドを使用してFABを制御できます

app.fab.open(fabEl, targetEl)	FABのスピードダイヤルアクション/ボタンを開くか、指定されたターゲットにモーフィングします fabEl - 必須のFABのHTMLElementまたはstring（CSSセレクター付き） targetEl - FABモーフィングターゲットのHTMLElementまたはstring（CSSセレクター付き）。オプション
app.fab.close(fabEl)	FABのスピードダイヤルアクション/ボタンを閉じるか、指定されたターゲットからモーフィングを戻します fabEl - 必須のFABのHTMLElementまたはstring（CSSセレクター付き）
app.fab.toggle(fabEl)	FABのスピードダイヤルアクション/ボタンを切り替えます fabEl - 必須のFABのHTMLElementまたはstring（CSSセレクター付き）

FABイベント

FABは、FAB要素で次のDOMイベントを発行します

イベント	ターゲット	説明
fab:open	FAB要素<div class="fab">	イベントは、FABが開いたとき、またはターゲット要素にモーフィングしたときにトリガーされます
fab:close	FAB要素<div class="fab">	イベントは、FABが閉じられたとき、またはターゲット要素からモーフィングを戻したときにトリガーされます

リンクによるFABの制御

リンクに特別なクラスとデータ属性を使用することで、必要なFAB（DOMにある場合）を開閉することが可能です

FABのスピードダイヤルアクションを開くには、任意のHTML要素（リンクが推奨）にfab-openクラスを追加する必要があります
FABのスピードダイヤルを閉じるか、ターゲットからFABをモーフィングで戻すには、任意のHTML要素（リンクが推奨）にfab-closeクラスを追加する必要があります
DOMに複数のFABがある場合は、このHTML要素に追加のdata-fab=".some-fab"属性を介して適切なFABを指定する必要があります

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

コメントアウトされた変数はデフォルトで指定されておらず、その値はこの場合のフォールバック値であることに注意してください。

:root {
  --f7-fab-margin: 16px;
  --f7-fab-extended-text-font-size: 14px;
  --f7-fab-label-padding: 4px 12px;
  --f7-fab-label-font-size: inherit;
  --f7-fab-button-size: 40px;
}
.ios {
  /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
  /* --f7-fab-bg-color: var(--f7-theme-color)); */
  --f7-fab-text-color: #fff;
  --f7-fab-border-radius: 50px;
  --f7-fab-size: 50px;
  --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  --f7-fab-extended-text-transform: uppercase;
  --f7-fab-extended-size: 50px;
  --f7-fab-extended-text-padding: 0 20px;
  --f7-fab-extended-text-font-weight: 600;
  --f7-fab-extended-text-letter-spacing: 0;
  --f7-fab-label-border-radius: 4px;
  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  --f7-fab-label-text-color: #333;
  --f7-fab-label-bg-color: #fff;
}
.md {
  /*
  --f7-fab-pressed-bg-color: var(--f7-fab-bg-color, var(--f7-theme-color));
  */
  --f7-fab-border-radius: 16px;
  --f7-fab-size: 56px;
  --f7-fab-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
  --f7-fab-extended-size: 56px;
  --f7-fab-extended-text-padding: 0 16px;
  --f7-fab-extended-text-font-weight: 500;
  --f7-fab-extended-text-letter-spacing: 0;
  --f7-fab-extended-text-transform: none;
  --f7-fab-label-border-radius: 8px;
  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-fab-bg-color: var(--f7-md-primary-container);
  --f7-fab-text-color: var(--f7-md-on-primary-container);
  --f7-fab-label-text-color: var(--f7-md-on-surface);
  --f7-fab-label-bg-color: var(--f7-md-surface-5);
}

例

fab.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Floating Action Button</div>
    </div>
  </div>
  <div class="fab fab-right-top">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-left">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-right-bottom">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a href="" class="fab-label-button">
        <span>1</span>
        <span class="fab-label">Action 1</span>
      </a>
      <a href="" class="fab-label-button">
        <span>2</span>
        <span class="fab-label">Action 2</span>
      </a>
      <a href="" class="fab-label-button">
        <span>3</span>
        <span class="fab-label">Third Action</span>
      </a>
    </div>
  </div>
  <div class="fab fab-left-bottom">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-left-top">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-bottom">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-center-center">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-center">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
      <a href="">4</a>
    </div>
  </div>
  <div class="fab fab-extended fab-center-bottom">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
      <div class="fab-text">Create</div>
    </a>
  </div>
  <div class="page-content">
    <div class="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>
    </div>
    <div class="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>
    </div>
  </div>
</div>

FABモーフィング

fab-morph.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Floating Action Button Morph</div>
    </div>
  </div>
  <div class="toolbar tabbar tabbar-icons toolbar-bottom fab-morph-target">
    <div class="toolbar-inner">
      <a class="tab-link tab-link-active">
        <i class="icon f7-icons if-not-md">envelope_fill</i>
        <i class="icon material-icons md-only">email</i>
        <span class="tabbar-label">Inbox</span>
      </a>
      <a class="tab-link">
        <i class="icon f7-icons if-not-md">calendar_fill</i>
        <i class="icon material-icons md-only">today</i>
        <span class="tabbar-label">Calendar</span>
      </a>
      <a class="tab-link">
        <i class="icon f7-icons if-not-md">cloud_upload_fill</i>
        <i class="icon material-icons md-only">file_upload</i>
        <span class="tabbar-label">Upload</span>
      </a>
    </div>
  </div>
  <div class="fab fab-right-bottom fab-morph" data-morph-to=".toolbar.fab-morph-target">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
    </a>
  </div>
  <div class="fab fab-left-bottom fab-morph" data-morph-to=".demo-fab-sheet.fab-morph-target">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
    </a>
  </div>
  <div class="fab fab-center-bottom fab-morph" data-morph-to=".demo-fab-fullscreen-sheet.fab-morph-target">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
    </a>
  </div>
  <div class="list links-list demo-fab-sheet fab-morph-target">
    <ul>
      <li><a class="fab-close">Link 1</a></li>
      <li><a class="fab-close">Link 2</a></li>
      <li><a class="fab-close">Link 3</a></li>
      <li><a class="fab-close">Link 4</a></li>
    </ul>
  </div>
  <div class="demo-fab-fullscreen-sheet fab-morph-target">
    <div class="block-title">Choose Something</div>
    <div class="list links-list">
      <ul>
        <li><a class="fab-close">Link 1</a></li>
        <li><a class="fab-close">Link 2</a></li>
        <li><a class="fab-close">Link 3</a></li>
        <li><a class="fab-close">Link 4</a></li>
      </ul>
    </div>
  </div>
  <div class="page-content">
    <div class="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>
    </div>
    <div class="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>
    </div>
  </div>
</div>

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

このページについて

FABレイアウト
FABの色
拡張FAB
スピードダイヤル
FABモーフィング
FABアプリメソッド
FABイベント
リンクによるFABの制御
CSS変数
例