iT邦幫忙

2022 iThome 鐵人賽

DAY 21
1
自我挑戰組

那些年我用 Ant Design 做過的網頁元件系列 第 21

Day21:Ant Design 裡的 Pagination

  • 分享至 

  • xImage
  •  

  先前介紹 Table 時有稍微介紹過 ANTD 的 Pagination,它就是字面上的頁碼沒錯,實際在網頁開發時,我們很常會遇到有大量 data 的狀況,不只是 Table 也有可能是 list, card 或 Row 搭配 Col 型態等方式去呈現資料,這時候使用 Pagination 就可以輕鬆處理好換頁效果了!

一、 最基本的使用方式:引用與呼叫它

import { Pagination } from 'antd';

const App = () => (
  <div>
    <Pagination pageSize={1} total={50} />
  <div/>
);

export default App;  

二、Pagination 可添加的屬性

  下面列出幾項我開發最常用的,也可以點此連結去看更多官方 api 文件

屬性名稱 可以使用的值 說明
position topLeft 或 topCenter 或 topRight 或 bottomLeft 或 bottomCenter 或 bottomRight 設定頁碼要為在表格的哪個相對位置,要注意的是要使用陣列將值包起來,預設為 [bottomRight]
size default 或 small 此參數指的是頁碼本身樣式上的大小設定。預設是default(32px),如果想要小一點可以選small(22px)
simple true 或 false 這是較簡易的頁碼顯示模式,有需要的話加上這個參數為true即可。
pageSize 數字 每頁要顯示的筆數
total 數字 總共有幾頁
current 數字 要呈現的那頁,通常一開始會設置為第一頁
itemRender `(page, type: 'page' 'prev'
showTotal (total) => 共 ${total} 項目 是否要顯示「總共幾個項目」,預設不會顯示,如果要的話可以加上此參數
showSizeChanger true 或 false 如果想要讓使用者自行調整每頁要顯示的數量,可以設置這個參數為true(它將會是一個下拉選單)。預設是否。
pageSizeOptions string[] 跟上面的showSizeChanger搭配使用,用來定義下拉選單的選項。預設為[10, 20, 50, 100]
showQuickJumper true 或 false 是否要提供直接跳到某頁的功能,推薦在筆數超多時的時候用,超級方便。

三、 今天的元件練習

  看完上面簡單的介紹後,下面提供我的一些簡單範例,若大家有興趣也可以到線上編輯器裡玩玩看唷!

https://ithelp.ithome.com.tw/upload/images/20221006/20140920aSydY5tJdJ.png
先前專案元件應用示意圖1(清單類型)
https://ithelp.ithome.com.tw/upload/images/20221006/20140920HmPatuxfVL.png
先前專案元件應用示意圖2(相簿類型)

上一篇
Day20:Ant Design 的 Avatar
下一篇
Day22:Ant Design 裡的 Tag
系列文
那些年我用 Ant Design 做過的網頁元件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2022-10-18 10:20:45

這篇簡潔有力

我要留言

立即登入留言