@atlaskit/pagination 是 Atlassian Design System (Atlassian 设计系统) 的一部分，它提供了一个易于使用和自定义的分页控件。该控件可以用于 Web 应用程序以帮助用户跳转到特定的页面或查找他们所需要的信息。
在此教程中，我们将为您提供有关如何使用 @atlaskit/pagination 的深度指南，以及如何将它添加到您的前端项目的详细步骤。
安装
要使用 @atlaskit/pagination，您需要先将它添加到您的项目中。您可以使用以下命令来安装它：
npm install @atlaskit/pagination
或者，如果您使用的是 Yarn 包管理器，可以使用以下命令：
yarn add @atlaskit/pagination
在成功安装 @atlaskit/pagination 之后，您可以开始使用它在您的项目中创建分页控件。
基本使用
在您的 React 应用程序中添加以下导入：
import Pagination from '@atlaskit/pagination';
接下来，您可以将组件添加到您的 JSX 模板中，如下所示：
<Pagination
pages={[1, 2, 3, 4, 5]}
onChange={(page, analyticsEvent) =>
console.log(`Go to page ${page} with ${analyticsEvent}`)
}
/>这将创建一个基本的分页控件，其中包含五个页面。
自定义
@atlaskit/pagination 提供了各种选项，可用于自定义外观和行为。以下是一些可用选项的列表：
包含页面
如果您想要更精细地控制显示的页面，可以使用 itemsBefore 和 itemsAfter 进行配置。它们会影响在当前页面两侧显示的页面数。
例如，如果您想要在当前页面左侧和右侧各显示三个页面，则可以使用以下代码：
<Pagination
pages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
itemsBefore={3}
itemsAfter={3}
onChange={(page, analyticsEvent) =>
console.log(`Go to page ${page} with ${analyticsEvent}`)
}
/>显示总页数
如果您想要同时显示总页数和当前页数，可以将 showTotalPages 属性设置为 true。
例如：
<Pagination
pages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
showTotalPages={true}
onChange={(page, analyticsEvent) =>
console.log(`Go to page ${page} with ${analyticsEvent}`)
}
/>这将在您的分页控件中包含“6 of 10”这样的文本，代表当前页面和总页面数。
更改行为
您可以通过将 innerStyles 和 style 属性传递给组件，来进一步自定义内部和外部样式。
例如，如果您想要更改背景颜色和字体大小，可以使用以下代码：
-- -------------------- ---- -------
-----------
---------- -- -- -- -- -- -- -- -- ----
------------------------ ------ --------- --------
--------------
-------------- -
---------------- --------
------ --------
--------- ------
-
--
---------------- --------------- --
--------------- -- ---- ------- ---- -------------------
-
--这将更改分页控件的外观，使其适合特定的需要。
示例代码
以下是一个完整的示例代码，其中包含有关如何使用 @atlaskit/pagination 的所有选项和自定义：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ---------- ---- -----------------------
-------- ----- -
----- ------------- --------------- - ------------
----- ---------------- - ------ --------------- -- -
--------------- -- ---- ------- ---- --------------------
---------------------
--
------ -
-----
-------------- ------------
-----------
---------- -- -- -- -- -- -- -- -- ----
-------------------------
---------------
--------------
---------------------
------------------------ ------ --------- --------
--------------
-------------- -
---------------- --------
------ --------
--------- ------
-
--
---------------------------
--
------
--
-
------ ------- ----通过阅读本教程，您现在应该了解如何使用 @atlaskit/pagination 包创建自定义的分页控件，并了解各种可用选项的作用。通过使用这些选项，您可以轻松地创建适合您项目需求的分页控件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6d4ccda9b7065299ccb974