Materialize-css 分页(1)

📌 相关文章

📜 Materialize-css 分页(1)

📅 最后修改于: 2023-12-03 15:02:52.709000 🧑 作者: Mango

Materialize-css 分页

Materialize-css 是一款现代化的响应式前端框架，提供了丰富的 UI 组件和交互效果。其中的分页组件可以用于数据列表、搜索结果等需要分页展示的场景。

安装

使用 npm 安装：

npm install materialize-css

或从官网下载相应版本的压缩包并引入：

<link rel="stylesheet" href="path/to/materialize.min.css">
<script src="path/to/materialize.min.js"></script>

使用

分页组件的 HTML 结构如下：

<ul class="pagination">
  <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
  <li class="active"><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="waves-effect"><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>

其中 active 表示当前页，disabled 表示不可点击的页。通过修改 li 和 a 的 class 来调整样式。

可以通过 JavaScript 初始化分页组件：

// 初始化
var instance = M.Pagination.init(elem, options);

// 实例方法
instance.nextPage();
instance.prevPage();
instance.setPage(pageNumber);

其中 elem 是分页组件的 DOM 元素，options 是设置选项。

设置选项

选项包括：

numVisible: 能够看到的页码数，默认为5
onSelect: 选中页码时的回调函数

var instance = M.Pagination.init(elem, {
  numVisible: 7,
  onSelect: function(pageNumber) {
    console.log('Selected page number ' + pageNumber);
  }
});

完整示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Materialize Pagination Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h3>Pagination Demo</h3>
      <ul class="pagination">
        <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
        <li class="active"><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="waves-effect"><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>
      document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.pagination');
        var options = {
          numVisible: 7,
          onSelect: function(pageNumber) {
            console.log('Selected page number ' + pageNumber);
          }
        };
        var instance = M.Pagination.init(elems, options);
      });
    </script>
  </body>
</html>

效果如下：

pagination-demo

总结

Materialize-css 提供了简单易用的分页组件，支持调整样式和设置选项，可以实现各种分页需求。要了解更多信息，请查看官方文档。