如何在 MaterializeCSS 中显示按钮制作类似于 FAB 按钮？

Question

我想让card-reveal的关闭功能像FAB按钮。

<div class="card">
    <div class="card-image waves-effect waves-block waves-light">
        <img class="activator" src="http://materializecss.com/images/office.jpg">
    </div>
    <div class="card-content">
        <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">&#xE5D4;</i></span>
        <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">Card Title<i     class="material-icons right">close</i></span>
        <p>Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
</div>

Here is my JSFiddle

我需要的？虽然材料设计图标现在可以在这个例子中使用，但我需要将“关闭”按钮设置为 fab。这意味着，即使card-reveal 内容向下滚动，关闭按钮也会保持在card-reveal 部分中的位置并且可见。 有可能吗？

Answer 1

卡片组件的性质似乎让这很难实现，而无需使用 hacky 和混合奇怪的 CSS 属性。我认为我能实现的最好的仍然看起来令人愉悦的是一个 FAB，它可以与card-reveal 一起上下移动。可能存在另一种解决方案，但可能不是那么干净。

<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator" src="http://materializecss.com/images/office.jpg">
  </div>
  <div class="card-content">
    <span class="card-title grey-text text-darken-4">
      Card Title
    </span>
    <a class="activator btn-floating red right"></a>
    <p><a href="#">This is a link</a></p>
  </div>
  <div class="card-reveal">
    <span class="card-title grey-text text-darken-4">
      Card Title
      <a class="card-title btn-floating red right"></a>
    </span>
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
  </div> 
</div>