組件分頁

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

每周編碼挑戰第17周的主題是：

分頁 (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:

注意事項：

1. 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 ？？)

2. 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的邊界上可見(去除溢出，您將看到我意思)

3. 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上的樣式相同，但是您可以根據需要在狀態之間進行區分

Other than that, I believe it's pretty straightforward, but if you have any questions please let me know. ?

除此之外，我相信這非常簡單，但是如果您有任何疑問，請告訴我。 ？

結論 (Conclusion)

There are other variants of paginations out there on the web. Find one you like and convert it to code.

網絡上還有其他分頁方式。 找到您喜歡的一個并將其轉換為代碼。

Make sure you share with me what you've built!

確保您與我分享您的作品！

Happy Coding! ?

編碼愉快！ ？

翻譯自: https://www.freecodecamp.org/news/how-to-create-a-pagination-component/

組件分頁