angularjs - Angular 1.5 Material 快速拨号在 table 上预留空间

Question

在 Angular 1.5 Material 中，我使用 <md-fab-speed-dial>在表格的行标题中。

<tr>
  <th>Foobar
    <md-fab-speed-dial class="md-scale" md-direction="up">
      <md-fab-trigger>
        <md-button class="md-fab md-mini" aria-label="Menu">
          <md-icon>menu</md-icon>
        </md-button>
      </md-fab-trigger>
      <md-fab-actions>
        <md-button aria-label="Comment" class="md-fab md-raised md-mini">
          <md-icon>comment</md-icon>
        </md-button>

但是快速拨号似乎在表格中为 FAB 按钮保留了空间!换句话说，“Foobar”和快速拨号触发器之间存在巨大的垂直间隙。显然，这违背了触发式快速拨号的目的——如果我必须保留所有空间，我还不如只列出没有快速拨号的 FAB。

如何防止快速拨号在表格中为触发的项目保留空间？我只想为触发器本身保留空间。

Answer 1

fab 按钮的具体实现是围绕 Flex 显示进行的，并保留了 md-fab-actions 标签内的操作所需的空间，因此它仅依赖于您将其放置在它自己的“层”上“(即绝对或固定在屏幕上)。

我理解您对组件本身的失望，但这就是它的工作方式...您可以寻找另一个组件或“调整”它以根据需要使用。调整并不难，也不像 Ilia Luzyanin 在他的评论中指出的那么复杂......您只需将此样式添加到 md-fab-actions 标签即可:

<md-fab-actions style="position: absolute; bottom: -156px;">

你就完成了。请考虑到您必须手动将底部属性设置为减去其内部按钮的大小，即每个按钮的大小为 52 像素。在这里，您有一个正在运行的 CodePen，其中包含三个 fabs，表行内有 2、3 和 4 个操作: Examle

如果您希望它向上打开，则必须将“底部”属性替换为“顶部”属性，因为操作按钮最初隐藏在触发它们的按钮后面，并且它们的位置是相对于它的。