Matarialize中文技术社区-Materialize专栏-Materialize CSS 框架中 Cards 的使用详解

Materialize CSS 框架中 Cards 的使用详解

Cards

Cards（卡片） 是一种用于展示信息的界面组件，通常包含图像、标题、内容和操作按钮。Materialize CSS 框架中的 Card 组件设计简洁且易于使用，非常适合用于布局中需要呈现复杂内容的地方。

本文将详细介绍如何在 Materialize CSS 框架中使用 Card，包括卡片的基本用法、样式定制、卡片中的元素及实际应用示例。

1. 基本 Card 使用

Materialize 的 Card 组件可以通过 .card 类来实现。卡片默认具有阴影和圆角，提供了一种分隔和突出内容的方式。

示例：基本卡片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Card 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>基本卡片</h4>
    <div class="card">
      <div class="card-image">
        <img src="https://via.placeholder.com/600x300" alt="示例图片">
      </div>
      <div class="card-content">
        <span class="card-title">卡片标题</span>
        <p>这是卡片内容的示例文本。你可以在这里添加任何你想展示的信息。</p>
      </div>
      <div class="card-action">
        <a href="#">链接 1</a>
        <a href="#">链接 2</a>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

.card 类定义了卡片的基本结构。
.card-image 用于展示卡片的图像。
.card-content 包含卡片的主要内容和标题。
.card-action 包含卡片底部的操作链接。

2. 卡片的标题和内容

在卡片中，你可以使用 .card-title 来设置标题，并在 .card-content 中添加详细的内容。你还可以使用 .card-reveal 类创建带有展开效果的卡片，显示更多内容。

示例：卡片标题和内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片标题和内容示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>卡片标题和内容</h4>
    <div class="card">
      <div class="card-content">
        <span class="card-title">卡片标题</span>
        <p>这是卡片内容的一部分。你可以在这里添加更多的信息或描述。</p>
      </div>
      <div class="card-action">
        <a href="#">操作链接 1</a>
        <a href="#">操作链接 2</a>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

.card-title 类用于设置卡片的标题。
.card-content 类用于设置卡片的内容部分。
.card-action 用于放置操作链接。

3. 带有图像的卡片

你可以在卡片中包含图像，以提高视觉效果和吸引力。图像通常放在卡片顶部，并且可以配合文本内容使用。

示例：带有图像的卡片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>带有图像的卡片示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>带有图像的卡片</h4>
    <div class="card">
      <div class="card-image">
        <img src="https://via.placeholder.com/600x300" alt="示例图像">
        <span class="card-title">图像标题</span>
      </div>
      <div class="card-content">
        <p>卡片内容在这里。图像标题可以用来展示额外的信息。</p>
      </div>
      <div class="card-action">
        <a href="#">链接 1</a>
        <a href="#">链接 2</a>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

.card-image 类用于包含和样式化图像。
.card-title 可以覆盖图像，并用作标题。

4. 带有卡片展开效果

使用 .card-reveal 类，你可以创建带有展开效果的卡片，允许用户点击按钮或区域来显示更多内容。

示例：带有卡片展开效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>带有卡片展开效果示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .card-reveal {
      display: none; /* 默认隐藏 */
    }
    .card.reveal-active .card-reveal {
      display: block; /* 激活时显示 */
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>带有展开效果的卡片</h4>
    <div class="card reveal-active">
      <div class="card-image">
        <img src="https://via.placeholder.com/600x300" alt="示例图像">
        <span class="card-title">图像标题</span>
      </div>
      <div class="card-content">
        <p>卡片内容部分。</p>
      </div>
      <div class="card-action">
        <a href="#" class="btn">显示更多</a>
      </div>
      <div class="card-reveal">
        <span class="card-title">更多内容 <i class="material-icons right">close</i></span>
        <p>这里是更多详细的内容。</p>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.card-reveal');
      var instances = M.CardReveal.init(elems, {
        // 配置选项
      });
    });
  </script>
</body>
</html>

解释：

.card-reveal 用于定义展开的内容区域。
使用 JavaScript 初始化卡片的展开效果，并通过 .reveal-active 控制显示或隐藏。

5. 卡片组

你可以将多个卡片放在同一个容器中，创建一个卡片组以展示类似的内容。

示例：卡片组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片组示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>卡片组</h4>
    <div class="row">
      <div class="col s12 m4">
        <div class="card">
          <div class="card-image">
            <img src="https://via.placeholder.com/300x200" alt="图像 1">
            <span class="card-title">卡片 1</span>
          </div>
          <div class="card-content">
            <p>卡片 1 内容。</p>
          </div>
          <div class="card-action">
            <a href="#">链接 1</a>
          </div>
        </div>
      </div>
      <div class="col s12 m4

">
        <div class="card">
          <div class="card-image">
            <img src="https://via.placeholder.com/300x200" alt="图像 2">
            <span class="card-title">卡片 2</span>
          </div>
          <div class="card-content">
            <p>卡片 2 内容。</p>
          </div>
          <div class="card-action">
            <a href="#">链接 2</a>
          </div>
        </div>
      </div>
      <div class="col s12 m4">
        <div class="card">
          <div class="card-image">
            <img src="https://via.placeholder.com/300x200" alt="图像 3">
            <span class="card-title">卡片 3</span>
          </div>
          <div class="card-content">
            <p>卡片 3 内容。</p>
          </div>
          <div class="card-action">
            <a href="#">链接 3</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

使用 .row 和 .col 类创建响应式的卡片布局。
每个卡片都在自己的列中显示，可以根据屏幕大小自动调整布局。

结论

Materialize CSS 框架中的 Card 组件提供了丰富的功能和样式选项，帮助你创建视觉吸引力强、功能齐全的内容展示卡片。从基本卡片到带有图像、展开效果和卡片组的使用，Materialize 使得实现各种布局和设计变得简单高效。你可以根据需求调整卡片的样式和内容，创建符合用户体验的界面。

评论区

评论列表

{{ rItem.user.nickname || rItem.user.username }} @ {{ rItem.toUser.nickname || rItem.toUser.username }}