Materialize CSS 框架中 Badges 的使用详解

class Badges

Badges（徽章）是一种小型的图标或标签，用于显示额外的信息，如通知数、状态或其他重要指标。Materialize CSS 框架提供了简单易用的 Badge 组件，帮助开发者在网页中轻松添加和样式化徽章。

本文将详细介绍如何在 Materialize CSS 中使用 Badges，包括基本用法、与其他组件的结合以及自定义样式的实现。通过具体示例，你将学习如何有效地在项目中使用 Badge 组件来提升用户体验和界面设计。

1. 基本 Badge 使用

在 Materialize 中，Badge 组件可以通过 .badge 类来实现。你可以将 .badge 类添加到任何元素上，以显示徽章。徽章默认是圆形的，可以容纳小量的文本或数字。

示例：基本徽章

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Badge 示例</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>
    <a class="btn">按钮 <span class="badge">4</span></a>
  </div>

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

解释：

  • 在按钮元素内添加了一个 .badge 类的 <span> 元素，徽章显示了数字 4。

2. 与其他组件结合使用

Badge 组件可以与 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>

  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="#">Home</a></li>
        <li><a href="#">Messages <span class="badge">10</span></a></li>
        <li><a href="#">Notifications <span class="badge">5</span></a></li>
      </ul>
    </div>
  </nav>

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

解释：

  • 在导航栏的 Messages 和 Notifications 链接中添加了徽章，以显示通知的数量。

3. 自定义徽章样式

Materialize 允许你通过自定义 CSS 来修改徽章的样式。你可以调整徽章的颜色、大小、形状等属性，以适应你的设计需求。

示例：自定义徽章样式

<!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>
    .custom-badge {
      background-color: #ff5722; /* 自定义背景颜色 */
      color: white; /* 自定义文字颜色 */
      border-radius: 50%; /* 圆形徽章 */
      padding: 0 10px; /* 内边距 */
      font-size: 14px; /* 字体大小 */
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>自定义徽章样式</h4>
    <a class="btn">按钮 <span class="badge custom-badge">9</span></a>
  </div>

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

解释：

  • 使用 .custom-badge 类自定义徽章的颜色、大小和形状。

4. 使用徽章显示通知

徽章常用于显示通知数量，特别是在消息和提醒等部分。你可以将徽章与动态数据结合，显示实时通知。

示例：动态通知徽章

<!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>
    <a class="btn">消息 <span id="message-badge" class="badge">0</span></a>
    <a class="btn">提醒 <span id="notification-badge" class="badge">0</span></a>
  </div>

  <script>
    // 假设从服务器获取通知数量
    const messageCount = 8;
    const notificationCount = 3;

    // 更新徽章
    document.getElementById('message-badge').textContent = messageCount;
    document.getElementById('notification-badge').textContent = notificationCount;
  </script>
</body>
</html>

解释：

  • 使用 JavaScript 动态更新徽章的内容，以显示实时的通知数量。

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="card">
      <div class="card-content">
        <span class="card-title">消息卡片 <span class="badge">8</span></span>
        <p>这是一张包含消息数量徽章的卡片。</p>
      </div>
      <div class="card-action">
        <a href="#">查看更多</a>
      </div>
    </div>
  </div>

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

解释：

  • 在卡片标题中添加徽章，以显示消息的数量。

结论

Materialize CSS 框架提供了灵活的 Badge 组件，帮助开发者在网页中有效地展示通知、状态或其他重要信息。通过简单的类和自定义样式，你可以轻松地创建和样式化徽章，将其与其他组件结合使用，提升用户界面的交互性和视觉效果。无论是基础徽章还是动态通知，Materialize 都能提供强大的支持。

chat评论区
评论列表
menu