组件分页_如何创建分页组件-CSDN博客

组件分页

The theme for week #17 of the Weekly Coding Challenge is:

分页 (Pagination)

A Pagination Component is used on websites where you have more content available than you want to display at one time to the user so you'd split it on multiple pages. By separating the content on different pages you are also saving a lot of bandwidth for the user because it won't be required to download all the information at once.

分页组件用于网站上，您所拥有的内容比一次要向用户显示的内容要多，因此您可以将其拆分为多个页面。通过分隔不同页面上的内容，您还为用户节省了大量带宽，因为不需要一次下载所有信息。

Some examples where you'd have a pagination: a blog with multiple pages, an online store with multiple products, etc.

您可以进行分页的一些示例：具有多个页面的博客，具有多种产品的在线商店等。

In this article we're going to build this Pagination Component:

在本文中，我们将构建此分页组件：

Note: the pagination is not functional, it's just for demo purposes (the visual). As an extra challenge, you can link this on a real website.

注意：分页功能不起作用，仅用于演示目的(视觉效果)。作为额外的挑战，您可以在一个真实的网站上链接它。

HTML (The HTML)

For the HTML structure we're going to use an ul as a wrapper with multiple lis. Each li will have an a tag within it because it's clickable (and semantic) and it'll send the user to the required page (if needed).

对于HTML结构，我们将使用ul作为带有多个li的包装器。每个li都将在其中包含a标签，因为它是可单击的(和语义)，并且会将用户定向到所需的页面(如果需要)。

We're also using FontAwesome for the icons (left, right and the dots icons).

我们还将FontAwesome用于图标(左侧，右侧和圆点图标)。

<ul class="pagination">
	<li>
		<a href="#"><i class="fas fa-chevron-left"></i></a>
	</li>
	<li>
		<a href="#"><i class="fas fa-ellipsis-h"></i></a>
	</li>
	<li><a href="#">2</a></li>
	<li class="active"><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li>
		<a href="#"><i class="fas fa-ellipsis-h"></i></a>
	</li>
	<li>
		<a href="#"><i class="fas fa-chevron-right"></i></a>
	</li>
</ul>

As you can see I also added an .active class to one of the lis - this is just to highlight the page we are on.

正如你可以看到我还增加了.active类的一个li秒-这仅仅是重点突出一页，我们都在。

CSS (The CSS)

I'm going to paste the CSS and we'll discuss the important pieces afterwards.

我将粘贴CSS，然后我们将讨论重要的部分。

.pagination {
	border: 2px solid #aaa;
	border-radius: 4px;
	display: flex;
	list-style-type: none;
	overflow: hidden;
	padding: 0;
}

.pagination li {
	background-color: #fff;
}

.pagination li:hover,
.pagination li.active {
	background-color: #aaa;
}

.pagination li a {
	color: #555;
	display: block;
	font-weight: bold;
	padding: 10px 15px;
	text-decoration: none;
}

.pagination li:hover a,
.pagination li.active a {
	color: #fff;
}

Things to note:

注意事项：

The ul / .pagination it's a flex container - this is because it's much easier to position the lis within it by using flexbox (and who doesn't like flexbox? ?)
ul / .pagination是一个flex容器-这是因为使用flexbox将li放置在其中很容易(而且谁不喜欢flexbox ？？)
Because we have a little bit of a border-radius on the ul we need to add overflow: hidden because otherwise the li's corner will be visible on top of the border of the ul (remove the overflow and you'll see what I mean)
因为我们在ul上有一个小border-radius ，所以我们需要添加overflow: hidden因为否则， li的角将在ul的边界上可见(去除溢出，您将看到我意思)
We have the same styling on li:hover as on li.active, but you can differentiate between these to states if you want
我们在li:hover上的样式与在li.active上的样式相同，但是您可以根据需要在状态之间进行区分