浮动操作按钮

浮动操作按钮 (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 - FAB 上的额外属性，其中必须指定目标元素的 CSS 选择器。在这个示例中，它指向工具栏
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 快速拨号操作，我们需要将 fab-open 类添加到任何 HTML 元素（最好是链接）
要关闭 FAB 快速拨号或将 FAB 从目标变形回来，我们需要将 fab-close 类添加到任何 HTML 元素（最好是链接）
如果 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 变量
示例