Question

我想像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 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

我需要的？虽然材料设计图标现在可以在这个例子中使用，但我需要使＆＃34;关闭＆＃34;按钮作为晶圆厂。这意味着，即使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>

如何将卡片显示按钮设为MaterializeCSS中的FAB按钮？

1 个答案: