Question

卡片用于展示不同类型的内容是很方便的，它适合用于展示具有相似的对象但是行为差异大的内容，如具有可变长度的标题的照片。

基本卡片

<div class="row">
  <div class="col s12 m6">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">卡片标题</span>
        <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
      </div>
      <div class="card-action">
        <a href="#">这是一个链接</a>
        <a href="#">这是一个链接</a>
      </div>
    </div>
  </div>
</div>

图像卡片

<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
        <img src="https://www.wenjiangs.com/wp-content/uploads/2020/docimg2/sample-1.jpg">
        <span class="card-title">Card Title</span>
      </div>
      <div class="card-content">
        <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
      </div>
      <div class="card-action">
        <a href="#">这是一个链接</a>
      </div>
    </div>
  </div>
</div>

卡片上的固定动作按钮

这是一个带固定动作按钮的图像卡片。

这是一个带巨大固定动作按钮的图像卡片。

<div class="row">
    <div class="col s12 m6">
<div class="card">
  <div class="card-image">
    <img src="https://www.wenjiangs.com/wp-content/uploads/2020/docimg2/sample-1.jpg">
    <span class="card-title">卡片标题</span>
    <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
  </div>
  <div class="card-content">
    <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
  </div>
</div>
    </div>
  </div>

水平卡片

这是一个带水平图片的标准卡片。

<div class="col s12 m7">
    <h2>水平卡片</h2>
    <div class="card horizontal">
<div class="card-image">
  <img src="http://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
  <div class="card-content">
    <p>我是一个很简单的卡片。我很擅长于包含少量的信息。</p>
  </div>
  <div class="card-action">
    <a href="#">这是一个链接</a>
  </div>
</div>
    </div>
  </div>

卡片式显示

这里是通过点击显示详细信息，实现这个只需添加card-reveal类到div中，并包含一个带span.card-title类的span标签。增加带activator类的元素到卡片里面，这样就可以点击这个卡片显示详情。

<div class="card">
    <div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="https://www.wenjiangs.com/wp-content/uploads/2020/docimg2/office.jpg">
    </div>
    <div class="card-content">
<span class="card-title activator grey-text text-darken-4">卡片标题<i class="material-icons right">more_vert</i></span>
<p><a href="#">这是一个链接</a></p>
    </div>
    <div class="card-reveal">
<span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
<p>单击后显示的产品的详细信息。</p>
    </div>
  </div>

卡片动作选项

卡片显示组件有一个默认的状态就是翻转卡片动作。

你可以使你的卡片动作总是可见通过添加 sticky-action 类到全部的卡片中。

  <div class="card sticky-action">
    ...
    <div class="card-action">...</div>
    <div class="card-reveal">...</div>
  </div>

卡片尺寸

如果你想有相同大小的卡片，你可以重新指定尺寸类。只要增加尺寸类到你的卡片类中。

<div class="card small">
    <!-- Card Content -->
  </div>

小型

小型卡片限制高度为 300px;

中型

中型卡片限制高度为 400px;

大型

大型卡片限制高度500px;

卡片面板

 

对于带少量标记的简单卡片，尝试使用一个带阴影效果和内补白的卡片面板。

<div class="row">
<div class="col s12 m5">
  <div class="card-panel teal">
    <span class="white-text">我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。在其他框架中我叫做面板。
    </span>
  </div>
</div>
</div>