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

Materialize CSS 框架中 Collections 的使用详解

Collections

Collections（集合） 是一种用于展示一组相关内容的 UI 组件，通常以列表的形式呈现。Materialize CSS 框架中的 Collection 组件为开发者提供了一个简单而灵活的方式来显示信息列表，比如导航菜单、联系人列表或其他类别的条目。

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

1. 基本 Collection 使用

Materialize 的 Collection 组件通过 .collection 类来定义，单个集合项则通过 .collection-item 类来实现。你可以将列表项用作导航链接或显示文本。

示例：基本 Collection

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Collection 示例</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>
    <ul class="collection">
      <li class="collection-item"><a href="#!">集合项 1</a></li>
      <li class="collection-item"><a href="#!">集合项 2</a></li>
      <li class="collection-item"><a href="#!">集合项 3</a></li>
    </ul>
  </div>

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

解释：

使用 .collection 类定义集合的容器。
每个集合项使用 .collection-item 类来定义。

2. 添加图像和其他元素

你可以在 Collection 中添加图像、图标或其他元素，以增强视觉效果和提供更多信息。

示例：带有图像和按钮的 Collection

<!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>
    <ul class="collection">
      <li class="collection-item avatar">
        <img src="https://via.placeholder.com/150" alt="示例图像" class="circle">
        <span class="title">集合项 1</span>
        <p>这是第一个集合项的描述。</p>
        <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
      </li>
      <li class="collection-item avatar">
        <img src="https://via.placeholder.com/150" alt="示例图像" class="circle">
        <span class="title">集合项 2</span>
        <p>这是第二个集合项的描述。</p>
        <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
      </li>
      <li class="collection-item avatar">
        <img src="https://via.placeholder.com/150" alt="示例图像" class="circle">
        <span class="title">集合项 3</span>
        <p>这是第三个集合项的描述。</p>
        <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
      </li>
    </ul>
  </div>

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

解释：

使用 .avatar 类将图像作为集合项的头像。
.circle 类将图像裁剪为圆形。
.secondary-content 类用于右侧的图标按钮（如收藏）。

3. 分组和突出显示

Materialize 的 Collection 组件允许你将集合项分组，并使用 .collection-header 类来添加标题。

示例：分组和突出显示

<!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>
    <ul class="collection">
      <li class="collection-header"><h5>组标题 1</h5></li>
      <li class="collection-item active">突出显示项 1</li>
      <li class="collection-item">普通项 1</li>
      <li class="collection-item">普通项 2</li>
      <li class="collection-header"><h5>组标题 2</h5></li>
      <li class="collection-item">普通项 3</li>
      <li class="collection-item">普通项 4</li>
    </ul>
  </div>

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

解释：

.collection-header 类用于分组的标题。
.active 类用于突出显示的集合项。

4. 自定义 Collection 样式

你可以使用 CSS 自定义 Collection 的外观，以满足你的设计需求。

示例：自定义 Collection 样式

<!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>
    .collection {
      background-color: #f0f0f0; /* 自定义背景颜色 */
    }
    .collection-item {
      border-bottom: 1px solid #ddd; /* 自定义底部边框 */
    }
    .collection-item.active {
      background-color: #d1e0e0; /* 自定义突出显示背景颜色 */
    }
    .collection-item .title {
      font-weight: bold; /* 自定义标题字体粗细 */
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>自定义样式的集合</h4>
    <ul class="collection">
      <li class="collection-item active">
        <span class="title">自定义项 1</span>
        <p>这是自定义样式的第一个集合项。</p>
      </li>
      <li class="collection-item">
        <span class="title">自定义项 2</span>
        <p>这是自定义样式的第二个集合项。</p>
      </li>
      <li class="collection-item">
        <span class="title">自定义项 3</span>
        <p>这是自定义样式的第三个集合项。</p>
      </li>
    </ul>
  </div>

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

解释：

自定义了集合的背景颜色、边框以及突出显示的样式。
通过 CSS 规则调整集合项的外观。

5. 使用 Collection 和其他组件结合

你可以将 Collection 组件与其他 Materialize 组件结合使用，例如侧边栏导航、卡片或表单。

示例：与侧边栏结合使用

<!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>

  <ul id="slide-out" class="sidenav">
    <li><a href="#!" class="brand-logo">Logo</a></li>
    <li><div class="divider"></div></li>
    <li><a href="#!" class="collection-item">侧边栏项 1</a></li>
    <li><a href="#!" class="collection-item">侧边栏项 2</a></li>
    <li><a href="#!" class="collection-item">侧边栏项 3</a></li

>
  </ul>

  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

  <div class="container">
    <h4>主内容区域</h4>
    <p>这里是页面的主要内容区域。</p>
  </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('.sidenav');
      var instances = M.Sidenav.init(elems);
    });
  </script>
</body>
</html>

解释：

使用 Materialize 的侧边栏组件和 Collection 结合创建导航菜单。
侧边栏通过 .sidenav 类定义，使用 JavaScript 初始化。

结论

Materialize CSS 框架中的 Collection 组件提供了一种灵活而简洁的方式来展示信息列表。从基本的集合到带有图像和按钮的复杂布局，以及自定义样式和与其他组件的结合，Materialize 使得创建和管理列表变得非常方便。你可以根据实际需求调整样式和布局，以创建符合用户需求的界面。

评论区

评论列表

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