Materialize CSS 框架中 Pagination 的使用详解

class Pagination

分页（Pagination）是网页中常见的功能，特别是在需要展示大量数据时，例如博客文章、产品列表或评论。Materialize CSS 框架提供了一个简洁而强大的分页组件，帮助开发者轻松实现分页功能。本文将详细介绍如何在 Materialize CSS 框架中使用分页，包括基本用法、自定义样式以及实际应用示例。

1. 基本 Pagination 使用

Materialize CSS 的 Pagination 组件用于创建分页导航。它支持基本的分页功能，包括当前页指示、上一页和下一页链接。

示例：基本分页

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Pagination 示例</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="pagination">
      <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
      <li class="waves-effect"><a href="#!">1</a></li>
      <li class="waves-effect"><a href="#!">2</a></li>
      <li class="waves-effect"><a href="#!">3</a></li>
      <li class="active"><a href="#!">4</a></li>
      <li class="waves-effect"><a href="#!">5</a></li>
      <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
    </ul>
  </div>

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

解释：

  • ul 元素使用 pagination 类来创建分页组件。
  • 每个 li 元素代表一个分页项。waves-effect 类用于添加点击效果。
  • 使用 active 类标记当前页。

2. 自定义 Pagination 样式

你可以通过 CSS 自定义分页组件的样式，以符合你的设计需求。

示例：自定义分页样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义 Pagination 样式示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .pagination {
      background-color: #ff5722; /* 自定义背景颜色 */
      border-radius: 50px; /* 自定义圆角效果 */
    }
    .pagination li {
      margin: 0 5px; /* 自定义分页项间距 */
    }
    .pagination li a {
      color: #ffffff; /* 自定义链接颜色 */
    }
    .pagination li.active a {
      background-color: #ffffff; /* 自定义当前页背景颜色 */
      color: #ff5722; /* 自定义当前页字体颜色 */
    }
    .pagination li a:hover {
      background-color: #ffffff; /* 自定义悬停效果背景颜色 */
      color: #ff5722; /* 自定义悬停效果字体颜色 */
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>自定义分页样式示例</h4>
    <ul class="pagination">
      <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
      <li class="waves-effect"><a href="#!">1</a></li>
      <li class="waves-effect"><a href="#!">2</a></li>
      <li class="waves-effect"><a href="#!">3</a></li>
      <li class="active"><a href="#!">4</a></li>
      <li class="waves-effect"><a href="#!">5</a></li>
      <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
    </ul>
  </div>

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

解释：

  • 修改分页组件的背景颜色、圆角效果、链接颜色等。
  • 使用 CSS 定义当前页的样式和悬停效果。

3. 使用分页组件与 JavaScript 交互

你可以使用 JavaScript 动态控制分页功能，例如根据数据变化更新分页内容。

示例：动态分页

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态 Pagination 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .pagination {
      margin-top: 20px; /* 自定义分页顶部间距 */
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>动态分页示例</h4>
    <div id="pagination-container"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    function createPagination(currentPage, totalPages) {
      let paginationHtml = '<ul class="pagination">';
      paginationHtml += `<li class="waves-effect ${currentPage === 1 ? 'disabled' : ''}"><a href="#!"><i class="material-icons">chevron_left</i></a></li>`;
    
      for (let i = 1; i <= totalPages; i++) {
        paginationHtml += `<li class="${currentPage === i ? 'active' : 'waves-effect'}"><a href="#!">${i}</a></li>`;
      }
    
      paginationHtml += `<li class="waves-effect ${currentPage === totalPages ? 'disabled' : ''}"><a href="#!"><i class="material-icons">chevron_right</i></a></li>`;
      paginationHtml += '</ul>';
    
      document.getElementById('pagination-container').innerHTML = paginationHtml;
    }

    // 初始化分页
    createPagination(3, 5); // 当前页为 3，总页数为 5
  </script>
</body>
</html>

解释：

  • 使用 JavaScript 动态生成分页 HTML，允许你根据实际数据创建分页内容。
  • createPagination 函数生成分页 HTML 并插入到页面中。
  • 根据当前页和总页数来设置分页的链接和禁用状态。

4. 结合 Materialize 的其他组件

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

  <div class="container">
    <h4>分页与卡片结合示例</h4>
    <div class="row">
      <div class="col s12 m6 l4">
        <div class="card">
          <div class="card-image">
            <img src="https://via.placeholder.com/300x200" alt="图片">
            <span class="card-title">卡片标题</span>
          </div>
          <div class="card-content">
            <p>这里是卡片的内容。</p>
          </div>
          <div class="card-action">
            <a href="#">阅读更多</a>
          </div>
        </div>
      </div>
      <!-- 添加更多卡片 -->
    </div>

    <!-- 分页 -->
    <div id="pagination-container"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    function createPagination(currentPage, totalPages) {
      let paginationHtml = '<ul class="pagination">';
      paginationHtml += `<li class="waves-effect ${currentPage === 1 ? 'disabled' : ''}"><a href="#!"><i class="material-icons">chevron_left</i></a></li>`;
    
      for (let i = 1; i <= totalPages; i++) {
        paginationHtml += `<li class="${currentPage === i ? 'active' : '

waves-effect'}"><a href="#!">${i}</a></li>`;
      }
    
      paginationHtml += `<li class="waves-effect ${currentPage === totalPages ? 'disabled' : ''}"><a href="#!"><i class="material-icons">chevron_right</i></a></li>`;
      paginationHtml += '</ul>';
    
      document.getElementById('pagination-container').innerHTML = paginationHtml;
    }

    // 初始化分页
    createPagination(1, 5); // 当前页为 1，总页数为 5
  </script>
</body>
</html>

解释：

  • 在卡片布局中添加分页组件，以展示分页效果。
  • 分页组件与卡片组件结合使用，提升页面的视觉效果和功能性。

结论

Materialize CSS 框架中的 Pagination 组件使得创建和自定义分页变得非常简单。通过基本使用、样式自定义、动态生成和与其他组件结合的功能，你可以轻松实现功能丰富且符合设计需求的分页系统。这不仅提升了用户体验，还使得数据展示更加高效和美观。

chat评论区
评论列表
menu