menu

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

基本卡片

卡片标题

我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便,因为我只需要一个小标记就可以有效地使用。



  <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="images/sample-1.jpg">
          <span class="card-title">卡片标题</span>
        </div>
        <div class="card-content">
          <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便,因为我只需要一个小标记就可以有效地使用。</p>
        </div>
        <div class="card-action">
          <a href="#">这是一个链接</a>
        </div>
      </div>
    </div>
  </div>
            

卡片上的浮动按钮

卡片标题 add

我是一张非常简单的卡片。我擅长包含少量信息。我很方便,因为我只需要很少的标记就可以有效地使用。





这是一张带有浮动按钮的图像卡。

add
卡片标题

我是一张非常简单的卡片。我擅长包含少量信息。我很方便,因为我只需要很少的标记就可以有效地使用。

这是一张带有大型浮动按钮的图像卡片。



  <div class="row">
    <div class="col s12 m6">
      <div class="card">
        <div class="card-image">
          <img src="images/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 class="header">水平卡片</h2>
    <div class="card horizontal">
      <div class="card-image">
        <img src="/images/nature/lorempixel6.jpg">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>我是一个很简单的卡片。我很擅长于包含少量的信息</p>
        </div>
        <div class="card-action">
          <a href="#">这是一个链接</a>
        </div>
      </div>
    </div>
  </div>
            

卡片展示

卡片标题more_vert

这是一个链接

卡片标题close

以下是关于该产品的更多信息,只有在点击后才会显示。





在这里,您可以添加一张卡片,点击后可以显示更多信息。 只需要增加一个div带card-reveal类,并包含一个span.card-title在里面。 添加类activator以允许其打开卡片露出部分。



  <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="images/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>
            
带操作选项的卡片
卡片标题more_vert

这是一个链接

卡片标题close

以下是关于该产品的更多信息,只有在点击后才会显示。



默认状态是将卡片展示置于卡片动作之上。

卡片标题more_vert

这是一个链接

卡片标题close

以下是关于该产品的更多信息,只有在点击后才会显示。

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



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

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

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

卡片中的选项卡

您可以通过在标题内容和选项卡内容之间添加带cards-tabs类的div的选项卡来分隔。


  <div class="card">
    <div class="card-content">
      <p>我是一张非常简单的卡片。我擅长包含少量信息。我很方便,因为我只需要很少的标记就可以有效地使用。</p>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a href="#test4">测试 1</a></li>
        <li class="tab"><a class="active" href="#test5">测试 2</a></li>
        <li class="tab"><a href="#test6">测试 3</a></li>
      </ul>
    </div>
    <div class="card-content grey lighten-4">
      <div id="test4">测试 1</div>
      <div id="test5">测试 2</div>
      <div id="test6">测试 3</div>
    </div>
  </div>
白色的

我是一张非常简单的卡片。我擅长包含少量信息。我很方便,因为我只需要很少的标记就可以有效地使用。

测试 1
测试 2
测试 3


带标签的基本白色背景卡。

有颜色的

我是一张非常简单的卡片。我擅长包含少量信息。我很方便,因为我只需要很少的标记就可以有效地使用。

测试 1
测试 2
测试 3


带标签的彩色或深色背景卡。

卡片尺寸

如果你想拥有统一尺寸的卡片,你可以使用我们的预制尺寸类。只需在卡片类之外添加尺寸类即可。


  <div class="card small">
    <!-- 卡片内容 -->
  </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>