{"id":22174069,"url":"https://github.com/kow-tow/ui5-pagination","last_synced_at":"2026-02-23T08:02:06.811Z","repository":{"id":260230357,"uuid":"880199450","full_name":"kow-tow/ui5-pagination","owner":"kow-tow","description":"Pagination webcomponent with ui5-button","archived":false,"fork":false,"pushed_at":"2024-11-07T07:11:27.000Z","size":465,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-06T14:55:16.608Z","etag":null,"topics":["lit-element","pagination","ui5-webcomponents"],"latest_commit_sha":null,"homepage":"https://kow-tow.github.io/ui5-pagination/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kow-tow.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-29T09:54:25.000Z","updated_at":"2024-11-07T07:11:30.000Z","dependencies_parsed_at":"2024-12-02T09:02:16.944Z","dependency_job_id":null,"html_url":"https://github.com/kow-tow/ui5-pagination","commit_stats":null,"previous_names":["kow-tow/ui5-pagination-lit","kow-tow/ui5-pagination"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kow-tow%2Fui5-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kow-tow%2Fui5-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kow-tow%2Fui5-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kow-tow%2Fui5-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kow-tow","download_url":"https://codeload.github.com/kow-tow/ui5-pagination/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236269136,"owners_count":19121825,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit-element","pagination","ui5-webcomponents"],"created_at":"2024-12-02T07:37:03.043Z","updated_at":"2025-10-12T20:30:39.084Z","avatar_url":"https://github.com/kow-tow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ui5-pagination\n\n適用於目前任意 ![UI5 Web Components](./public/favicon.svg) [UI5 Web Components](https://sap.github.io/ui5-webcomponents/) 版本（1.8+ 定 2.8+ 以下簡稱ui5wc）的分頁元件\n\n[![lit](https://img.shields.io/badge/lit-4c64ff.svg?style=for-the-badge\u0026logo=lit)](https://lit.dev/)\n[![pnpm v9](https://img.shields.io/badge/maintained%20with-pnpm%209.0-cc00ff.svg?style=for-the-badge\u0026logo=pnpm)](https://pnpm.io/)\n[![nodejs v20](https://img.shields.io/badge/Node.js-v20.17.0-026e00.svg?style=for-the-badge\u0026logo=nodedotjs)](https://nodejs.org/)\n\n## 安裝\n\n### lit\n\n作爲對等套件，按下面的操作來提升 `@ui5/webcomponents\u003elit`\n\n先指認版本\n\n```json5\n// package.json\n\"pnpm\": {\n    \"overrides\": {\n        // 先看看目前ui5wc套用的lit版本吧 以後若是lit@3.x就不需要了\n        // \"lit\": \"$lit\" // 如果顯示安裝并指定版本了就這樣寫\n        \"lit\": \"^2.8.0\"\n    }\n}\n```\n\n套件版本提升\n\n```ini\n# .npmrc\nhoist-pattern[] = *lit*\npublic-hoist-pattern[] = *lit*\n```\n\n以上操作再利用其他基於`lit`的元件時非常有用\n\n## ui5\n\nui5當然要一起安裝\n\n```shell\npnpm i @ui5/webcomponents\npnpm i @ui5/webcomponents-icons\npnpm i ui5-pagination\n```\n\n## CDN 支援\n\n雖然 [ui5元件官網中](https://sap.github.io/ui5-webcomponents/docs/FAQ/) 不推薦 但你依然可以透過 [`JSPM`](https://generator.jspm.io/) 來生成`importmap`\n\n使用`JSPM`會同`pnpm`一樣將`lit@*`取到最新導致同 ui5wc 套用的`lit`版本不一致，\n\n所以你應該手動添加以下`importmap`欄位（ui5wc 目前依賴 `lit@2.8.0`）：\n\n```diff\n\u003cscript type=\"importmap\"\u003e\n    {\n        \"imports\": {\n            \"@ui5/webcomponents-icons/AllIcons.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents-icons@2.3.0/dist/AllIcons.js\",\n            \"@ui5/webcomponents/dist/Button.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Button.js\",\n            \"@ui5/webcomponents/dist/Dialog.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Dialog.js\",\n            \"@ui5/webcomponents/dist/Input.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Input.js\",\n            \"@ui5/webcomponents/dist/Label.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Label.js\",\n            \"@ui5/webcomponents/dist/Option.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Option.js\",\n            \"@ui5/webcomponents/dist/Select.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Select.js\",\n            \"@ui5/webcomponents-compat/Table.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents-compat@2.3.0/dist/Table.js\",\n            \"@ui5/webcomponents-compat/TableCell.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents-compat@2.3.0/dist/TableCell.js\",\n            \"@ui5/webcomponents-compat/TableColumn.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents-compat@2.3.0/dist/TableColumn.js\",\n            \"@ui5/webcomponents-compat/TableRow.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents-compat@2.3.0/dist/TableRow.js\",\n            \"@ui5/webcomponents/dist/Toast.js\": \"https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/Toast.js\",\n+           \"ui5-pagination\": \"https://ga.jspm.io/npm:ui5-pagination@0.2.1/dist/index.js\"\n        },\n        \"scopes\": {\n            \"https://ga.jspm.io/\": {\n                \"@ui5/webcomponents-base/dist/\": \"https://ga.jspm.io/npm:@ui5/webcomponents-base@2.3.0/dist/\",\n                \"@ui5/webcomponents-icons/dist/\": \"https://ga.jspm.io/npm:@ui5/webcomponents-icons@2.3.0/dist/\",\n                \"@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\",\n                \"@ui5/webcomponents/dist/\": \"https://ga.jspm.io/npm:@ui5/webcomponents@2.3.0/dist/\",\n                \"lit-html\": \"https://ga.jspm.io/npm:lit-html@2.8.0/development/lit-html.js\",\n                \"lit-html/\": \"https://ga.jspm.io/npm:lit-html@2.8.0/development/\",\n+               \"lit-element/lit-element.js\": \"https://ga.jspm.io/npm:lit-element@3.3.3/development/lit-element.js\",\n+               \"lit\": \"https://ga.jspm.io/npm:lit@2.8.0/index.js\",\n+               \"lit/\": \"https://ga.jspm.io/npm:lit@2.8.0/\",\n+               \"@lit/reactive-element\": \"https://ga.jspm.io/npm:@lit/reactive-element@1.6.3/development/reactive-element.js\",\n+               \"@lit/reactive-element/decorators/\": \"https://ga.jspm.io/npm:@lit/reactive-element@1.6.3/development/decorators/\"\n            }\n        }\n    }\n\u003c/script\u003e\n```\n\n雖然 ui5wc 很長一段時間一直是依賴 `lit@2.8.0`，寫成 `lit@*` 可以不必頻繁跟隨維護發版\n\n## 基本\n\n即使不使用也要引入按鈕和圖標\n\n```html\n\u003cscript type=\"module\"\u003e\n    import '@ui5/webcomponents/dist/Button.js'\n    // 若全部引入圖標： import '@ui5/webcomponents-icons/AllIcons.js'\n    // 只引入最基本的兩隻箭頭圖標：\n    import '@ui5/webcomponents-icons/dist/navigation-left-arrow.js'\n    import '@ui5/webcomponents-icons/dist/navigation-right-arrow.js'\n    // 以上是對等套件\n    import 'ui5-pagination'\n\u003c/script\u003e\n\u003c!-- current 從1開始 ；index 從0開始 --\u003e\n\u003cui5-pagination total=\"10\" current=\"4\"\u003e\u003c/ui5-pagination\u003e\n\u003cui5-pagination total=\"10\" index=\"3\"\u003e\u003c/ui5-pagination\u003e\n\u003cscript type=\"module\"\u003e\n    const pagination = document.querySelector('ui5-pagination')\n\n    pagination.addEventListener('page-to', (e) =\u003e\n        // e.detail 獲取的是將要到達的 pageNumber\n        // 默認行爲： `props.onChange(this.current = e.detail)`\n        console.log(`number: ${e.detail}`),\n    )\n\n    /**\n     * `props.onChange` 并非事件\n     * 參數 `n` 是新的 `this.current`\n     */\n    pagination.onChange = (n) =\u003e console.log(n)\n\u003c/script\u003e\n```\n\n## 開發\n\n如果你想貢獻代碼或者二次開發\n\n```shell\n# 安裝\npnpm i\n# 倘若 lit 版本同 ui5wc 所依賴的不一致 可以强制指定\npnpm i lit@2.8.0  --save-peer\n\n# 調試\npnpm dev\n\n# 構建\npnpm build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkow-tow%2Fui5-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkow-tow%2Fui5-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkow-tow%2Fui5-pagination/lists"}