Framework7新版学习笔记之 升级版悬浮按钮

一：悬浮按钮

悬浮按钮是一种有着特殊UI效果的按钮，它看起来就像悬浮在界面之上一样。

悬浮按钮点击时通常会展开一系列的选项按钮，十分酷炫。

新版F7中的悬浮按钮不仅仅是Material Design特有了，而是一种通用的UI控件。

二：悬浮按钮种类

1）按照它在界面中的位置来分类：

• 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

2）按照点击后效果分类

• 拨号盘(默认)：点击后展开多个按钮
• 渐变(fab-morph)：点击后，按钮变化为界面上的某个组成部分(如：底部工具栏)

四：按钮颜色

通过 color-xx 来指定颜色。

五：拨号盘悬浮按钮

<div class="fab fab-left-top color-yellow">
    <!--1:定义悬浮按钮UI样式-->
    <a href="#">
      <i class="icon f7-icons ios-only">add</I>//第一个标签为按钮关闭时样式
      <i class="icon f7-icons ios-only">close</I>//第二个标签为按钮被点击打开后的样式
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>

    <!--2:定义按钮展开内容 -->
    <div class="fab-buttons fab-buttons-bottom">
      <a href="">按钮1</a>
      <a href="">按钮2</a>
      <a href="">按钮3</a>
      ......
    </div>
  </div>

六：渐变悬浮按钮

<!-- 1:定义 FAB Morph Target(变化目标，点击悬浮按钮后才呈现)-->
  <div class="... fab-morph-target" id="变化目标id">
    内容...
  </div>

<!-- 2:定义悬浮按钮，指定渐变类型以及变化目标-->
<div class="fab fab-right-bottom fab-morph" data-morph-to="#变化目标id">

原文地址：https://www.cnblogs.com/ygj0930/p/8460519.html