https://github.com/kow-tow/ui5-pagination
Pagination webcomponent with ui5-button
https://github.com/kow-tow/ui5-pagination
lit-element pagination ui5-webcomponents
Last synced: 3 months ago
JSON representation
Pagination webcomponent with ui5-button
- Host: GitHub
- URL: https://github.com/kow-tow/ui5-pagination
- Owner: kow-tow
- Created: 2024-10-29T09:54:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-07T07:11:27.000Z (over 1 year ago)
- Last Synced: 2025-01-06T14:55:16.608Z (over 1 year ago)
- Topics: lit-element, pagination, ui5-webcomponents
- Language: TypeScript
- Homepage: https://kow-tow.github.io/ui5-pagination/
- Size: 454 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# ui5-pagination
適用於目前任意  [UI5 Web Components](https://sap.github.io/ui5-webcomponents/) 版本（1.8+ 定 2.8+ 以下簡稱ui5wc）的分頁元件
[](https://lit.dev/)
[](https://pnpm.io/)
[](https://nodejs.org/)
## 安裝
### lit
作爲對等套件，按下面的操作來提升 `@ui5/webcomponents>lit`
先指認版本
```json5
// package.json
"pnpm": {
"overrides": {
// 先看看目前ui5wc套用的lit版本吧 以後若是lit@3.x就不需要了
// "lit": "$lit" // 如果顯示安裝并指定版本了就這樣寫
"lit": "^2.8.0"
}
}
```
套件版本提升
```ini
# .npmrc
hoist-pattern[] = *lit*
public-hoist-pattern[] = *lit*
```
以上操作再利用其他基於`lit`的元件時非常有用
## ui5
ui5當然要一起安裝
```shell
pnpm i @ui5/webcomponents
pnpm i @ui5/webcomponents-icons
pnpm i ui5-pagination
```
## CDN 支援
雖然 [ui5元件官網中](https://sap.github.io/ui5-webcomponents/docs/FAQ/) 不推薦 但你依然可以透過 [`JSPM`](https://generator.jspm.io/) 來生成`importmap`
使用`JSPM`會同`pnpm`一樣將`lit@*`取到最新導致同 ui5wc 套用的`lit`版本不一致，
所以你應該手動添加以下`importmap`欄位（ui5wc 目前依賴 `lit@2.8.0`）：
```diff
{
"imports": {
"@ui5/webcomponents-icons/AllIcons.js": "https://ga.jspm.io/npm:@ui5/webcomponents-icons@2.3.0/dist/AllIcons.js",
"@ui5/webcomponents/dist/Button.js": "https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Button.js",
"@ui5/webcomponents/dist/Dialog.js": "https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Dialog.js",
"@ui5/webcomponents/dist/Input.js": "https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Input.js",
"@ui5/webcomponents/dist/Label.js": "https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Label.js",
"@ui5/webcomponents/dist/Option.js": "https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Option.js",
"@ui5/webcomponents/dist/Select.js": "https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Select.js",
"@ui5/webcomponents-compat/Table.js": "https://ga.jspm.io/npm:@ui5/webcomponents-compat@2.3.0/dist/Table.js",
"@ui5/webcomponents-compat/TableCell.js": "https://ga.jspm.io/npm:@ui5/webcomponents-compat@2.3.0/dist/TableCell.js",
"@ui5/webcomponents-compat/TableColumn.js": "https://ga.jspm.io/npm:@ui5/webcomponents-compat@2.3.0/dist/TableColumn.js",
"@ui5/webcomponents-compat/TableRow.js": "https://ga.jspm.io/npm:@ui5/webcomponents-compat@2.3.0/dist/TableRow.js",
"@ui5/webcomponents/dist/Toast.js": "https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Toast.js",
+ "ui5-pagination": "https://ga.jspm.io/npm:ui5-pagination@0.2.1/dist/index.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@ui5/webcomponents-base/dist/": "https://ga.jspm.io/npm:@ui5/webcomponents-base@2.3.0/dist/",
"@ui5/webcomponents-icons/dist/": "https://ga.jspm.io/npm:@ui5/webcomponents-icons@2.3.0/dist/",
"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js": "https://ga.jspm.io/npm:@ui5/webcomponents-theming@2.3.0/dist/generated/themes/sap_horizon/parameters-bundle.css.js",
"@ui5/webcomponents/dist/": "https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/",
"lit-html": "https://ga.jspm.io/npm:lit-html@2.8.0/development/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@2.8.0/development/",
+ "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@3.3.3/development/lit-element.js",
+ "lit": "https://ga.jspm.io/npm:lit@2.8.0/index.js",
+ "lit/": "https://ga.jspm.io/npm:lit@2.8.0/",
+ "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@1.6.3/development/reactive-element.js",
+ "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@1.6.3/development/decorators/"
}
}
}
```
雖然 ui5wc 很長一段時間一直是依賴 `lit@2.8.0`，寫成 `lit@*` 可以不必頻繁跟隨維護發版
## 基本
即使不使用也要引入按鈕和圖標
```html
import '@ui5/webcomponents/dist/Button.js'
// 若全部引入圖標： import '@ui5/webcomponents-icons/AllIcons.js'
// 只引入最基本的兩隻箭頭圖標：
import '@ui5/webcomponents-icons/dist/navigation-left-arrow.js'
import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js'
// 以上是對等套件
import 'ui5-pagination'
const pagination = document.querySelector('ui5-pagination')
pagination.addEventListener('page-to', (e) =>
// e.detail 獲取的是將要到達的 pageNumber
// 默認行爲： `props.onChange(this.current = e.detail)`
console.log(`number: ${e.detail}`),
)
/**
* `props.onChange` 并非事件
* 參數 `n` 是新的 `this.current`
*/
pagination.onChange = (n) => console.log(n)
```
## 開發
如果你想貢獻代碼或者二次開發
```shell
# 安裝
pnpm i
# 倘若 lit 版本同 ui5wc 所依賴的不一致 可以强制指定
pnpm i lit@2.8.0 --save-peer
# 調試
pnpm dev
# 構建
pnpm build
```