Question

在Angular 1.5材质中，我在表格的行标题中使用了<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;">

你已经完成了。考虑到你必须手动将bottom属性设置为减去其内部按钮的大小，即每个属性为52px。在这里，你有一个工作的CodePen，有三个工厂，在表格行中有2,3和4个动作：Examle

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

Angular 1.5材料快速拨号保留表中的空间

1 个答案: