浮动操作按钮

浮动操作按钮（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颜色

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元素添加附加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>

速拨按钮容器的位置通过附加类配置：

  • 注意速拨操作按钮将按相反顺序显示

  • 你不应使用超过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>

其中

FAB应用方法

我们可以使用以下应用方法来控制FABs：

app.fab.open(fabEl, targetEl)打开FAB速拨操作/按钮，或将其变形到指定目标
  • fabEl - HTMLElement或字符串（带有CSS选择器）所需FAB
  • targetEl - HTMLElement或字符串（带有CSS选择器）FAB变形目标。可选
app.fab.close(fabEl)关闭FAB速拨操作/按钮，或将其从指定目标变形回来
  • fabEl - HTMLElement或字符串（带有CSS选择器）所需FAB
app.fab.toggle(fabEl)切换FAB速拨操作/按钮
  • fabEl - HTMLElement或字符串（带有CSS选择器）所需FAB

FAB 事件

FAB将在FAB元素上触发以下DOM事件：

事件Target描述
fab:openFAB元素<div class="fab">当FAB打开或变形到目标元素时将触发事件
fab:closeFAB元素<div class="fab">当FAB关闭或变形回目标元素时将触发事件

可以使用链接上的特殊类和数据属性来打开和关闭所需的FAB（如果你在DOM中拥有它）：

  • 要打开FAB速拨操作，我们需要添加fab-open类

  • 要关闭FAB速拨或将其变形回目标，我们需要添加fab-close类

  • 如果你DOM中有多个FAB，你需要通过附加data-fab=".some-fab"属性在这个 HTML 元素上指定适当的 Sheet

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>
改进此文档
在本页上