浮動動作按鈕

浮動動作按鈕 (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 支援所有預設顏色。若要變更其顏色，只要將 color-[color] 類別新增到 FAB 元素即可。

<!-- 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-extended 類別新增到 FAB 元素，並將其額外文字放在裡面的 <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 - FAB 上的額外屬性，必須指定目標元素的 CSS 選擇器。在此範例中，它指向工具列
fab-morph-target - FAB 變形目標上的額外必要類別，在此範例中，它新增至工具列

FAB 應用程式方法

我們可以使用下列應用程式方法來控制 FAB

app.fab.open(fabEl, targetEl)	開啟 FAB 快速撥號動作/按鈕，或將其變形為指定的目標 fabEl - HTMLElement 或 string（含 CSS 選擇器）的必要 FAB targetEl - HTMLElement 或 string（含 CSS 選擇器）的 FAB 變形目標。選用
app.fab.close(fabEl)	關閉 FAB 快速撥號動作/按鈕，或將其從指定的目標變形回來 fabEl - HTMLElement 或 string（含 CSS 選擇器）的必要 FAB
app.fab.toggle(fabEl)	切換 FAB 快速撥號動作/按鈕 fabEl - HTMLElement 或 string（含 CSS 選擇器）的必要 FAB

FAB 事件

FAB 會在 FAB 元素上觸發下列 DOM 事件

事件	目標	描述
fab:open	FAB 元素<div class="fab">	事件會在 FAB 開啟時或當它變形為目標元素時觸發
fab:close	FAB 元素<div class="fab">	事件會在 FAB 關閉時或當它從目標元素變形回來時觸發

使用連結控制 FAB

可以使用連結上的特殊類別和資料屬性，開啟和關閉必要的 FAB（如果您在 DOM 中有 FAB）

若要開啟 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 變數
範例