適用於目前任意 
UI5 Web Components 版本（1.8+ 定 2.8+ 以下簡稱ui5wc）的分頁元件
作爲對等套件，按下面的操作來提升 @ui5/webcomponents>lit
先指認版本
// package.json
"pnpm": {
"overrides": {
// 先看看目前ui5wc套用的lit版本吧 以後若是[email protected]就不需要了
// "lit": "$lit" // 如果顯示安裝并指定版本了就這樣寫
"lit": "^2.8.0"
}
}套件版本提升
# .npmrc
hoist-pattern[] = *lit*
public-hoist-pattern[] = *lit*以上操作再利用其他基於lit的元件時非常有用
ui5當然要一起安裝
pnpm i @ui5/webcomponents
pnpm i @ui5/webcomponents-icons
pnpm i ui5-pagination雖然 ui5元件官網中 不推薦 但你依然可以透過 JSPM 來生成importmap
使用JSPM會同pnpm一樣將lit@*取到最新導致同 ui5wc 套用的lit版本不一致，
所以你應該手動添加以下importmap欄位（ui5wc 目前依賴 [email protected]）：
<script type="importmap">
{
"imports": {
"@ui5/webcomponents-icons/AllIcons.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/AllIcons.js",
"@ui5/webcomponents/dist/Button.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Button.js",
"@ui5/webcomponents/dist/Dialog.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Dialog.js",
"@ui5/webcomponents/dist/Input.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Input.js",
"@ui5/webcomponents/dist/Label.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Label.js",
"@ui5/webcomponents/dist/Option.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Option.js",
"@ui5/webcomponents/dist/Select.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Select.js",
"@ui5/webcomponents-compat/Table.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Table.js",
"@ui5/webcomponents-compat/TableCell.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/TableCell.js",
"@ui5/webcomponents-compat/TableColumn.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/TableColumn.js",
"@ui5/webcomponents-compat/TableRow.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/TableRow.js",
"@ui5/webcomponents/dist/Toast.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/Toast.js",
+ "ui5-pagination": "https://ga.jspm.io/npm:[email protected]/dist/index.js"
},
"scopes": {
"https://ga.jspm.io/": {
"@ui5/webcomponents-base/dist/": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/",
"@ui5/webcomponents-icons/dist/": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/",
"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/generated/themes/sap_horizon/parameters-bundle.css.js",
"@ui5/webcomponents/dist/": "https://ga.jspm.io/npm:@ui5/[email protected]/dist/",
"lit-html": "https://ga.jspm.io/npm:[email protected]/development/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:[email protected]/development/",
+ "lit-element/lit-element.js": "https://ga.jspm.io/npm:[email protected]/development/lit-element.js",
+ "lit": "https://ga.jspm.io/npm:[email protected]/index.js",
+ "lit/": "https://ga.jspm.io/npm:[email protected]/",
+ "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/[email protected]/development/reactive-element.js",
+ "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/[email protected]/development/decorators/"
}
}
}
</script>雖然 ui5wc 很長一段時間一直是依賴 [email protected]，寫成 lit@* 可以不必頻繁跟隨維護發版
即使不使用也要引入按鈕和圖標
<script type="module">
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'
</script>
<!-- current 從1開始 ；index 從0開始 -->
<ui5-pagination total="10" current="4"></ui5-pagination>
<ui5-pagination total="10" index="3"></ui5-pagination>
<script type="module">
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)
</script>如果你想貢獻代碼或者二次開發
# 安裝
pnpm i
# 倘若 lit 版本同 ui5wc 所依賴的不一致 可以强制指定
pnpm i [email protected] --save-peer
# 調試
pnpm dev
# 構建
pnpm build