#  Pagination 分頁

### 介紹
    
當數據量較多時，採用分頁的形式分隔長列表。
    
### 安裝
``` javascript
import { Pagination } from '@nutui/nutui-react-native';
```    

### 基礎用法
通過modelValue來綁定當前頁碼時，組件為受控狀態，分頁顯示取決於傳入的modelValue，一般搭配onChange使用。
不需要受控時，可通過defaultCurrentPage指定當前頁碼
:::demo
``` tsx
import React, { useState } from 'react'
import { Pagination } from '@nutui/nutui-react-native';

const App = () => {
  const [currentPage1, setCurrentPage1] = useState(1)
  const pageChange1 = (v: any) => {
    const c = v
    setCurrentPage1(c)
  }
  return (
    <Pagination
      modelValue={currentPage1}
      totalItems="25"
      itemsPerPage="5"
      onChange={pageChange1}
    />
  )
}
export default App;
```
:::
### 簡單模式
將 mode 設置為 "simple" 來切換到簡單模式，此時分頁器不會展示具體的頁碼按鈕。
:::demo
``` tsx
import React, { useState } from 'react'
import { Pagination } from '@nutui/nutui-react-native';

const App = () => {
  const [currentPage2, setCurrentPage2] = useState(1)
  const pageChange2 = (v: any) => {
    const c = v
    setCurrentPage2(c)
  }
  return (
    <Pagination
      modelValue={currentPage2} 
      pageCount={12} 
      mode="simple" 
      onChange={pageChange2} 
    />
  )
}
export default App;
```
:::

### 顯示省略號
設置 force-ellipses 後會展示省略號按鈕，點擊後可以快速跳轉。
:::demo
``` tsx
import React, { useState } from 'react'
import { Pagination } from '@nutui/nutui-react-native';

const App = () => {
  const [currentPage3, setCurrentPage3] = useState(1)
  const pageChange3 = (v: any) => {
    const c = v
    setCurrentPage3(c)
  }
  return (
    <Pagination
      modelValue={currentPage3}
      totalItems="125"
      showPageSize="3"
      forceEllipses
      onChange={pageChange3}
    />
  )
}
export default App;
```
:::
### 自定義按鈕
通過pageNodeRender傳入自定義方法，入參數為page:{ number:頁數, text:"文本", active:"選中狀態" }
:::demo
``` tsx
import React, { useState } from 'react'
import { Pagination,Icon } from '@nutui/nutui-react-native';
import { View, Text } from 'react-native';

const App = () => {
  const [currentPage4, setCurrentPage4] = useState(1)
  const pageChange4 = (v: any) => {
    const c = v
    setCurrentPage4(c)
  }
  const pageNodeRender = (page: any) => {
    return <View><Text>{item.number === 3 ? 'hot' : item.text}</Text></View>;
  }
  return (
    <Pagination
      modelValue={currentPage4}
      totalItems="500"
      showPageSize="5"
      onChange={pageChange4}
      pageNodeRender={pageNodeRender} 
      prevText={<Icon name="left"/>} 
      nextText={<Icon name="right"/>}
    />
  )
}
export default App;
```
:::
    
## API
    
### Props
    
| 屬性 | 說明 | 類型 | 預設值           |
| -------------- | -------------------------------- | ------------------------- | ----------------- |
| modelValue     | 當前頁碼                         | Number                    | -                 |
| defaultValue   | 當前頁碼                         | Number                    | 1                 |
| mode           | 顯示模式,可選值為：multi，simple  | String                    | multi             |
| prevText       | 自定義上一頁按鈕內容             | String \| React.ReactNode | 上一頁            |
| nextText       | 自定義下一頁按鈕內容             | String \| React.ReactNode | 下一頁            |
| pageCount      | 總頁數                           | String \| Number          | 傳入/根據頁數計算 |
| totalItems     | 總記錄數                         | String \| Number          | 0                 |
| itemsPerPage   | 每頁記錄數                       | String \| Number          | 10                |
| showPageSize   | 顯示的頁碼個數                   | String \| Number          | 5                 |
| forceEllipses  | 是否顯示省略號                   | Boolean                   | false             |
| pageNodeRender | 用於自定義頁碼的結構             | (page) => React.ReactNode | -                 |
    
### Events
    
| 事件名稱 | 說明 | 回調參數     |
| -------- | -------------- | -------- |
| onChange | 页码改变时触发 | value    |
