此網站需要開啟JavaScript
JavaScript is required

版型元件

頁首、頁尾,以及兩個無障礙相關的輔助元件。這些多半已經掛在 layout 裡,一般頁面不需要自己放。

頁首

LayoutHeader

components/Layout/Header.vue

目前是不吃 props 的靜態頁首:Logo、UI KIT、GITLAB 連結。 內容直接改元件本身,之後若要接後台選單資料, 可參考 ntcart 的 LayoutPageHeader 做法 (傳入 headerMenu 陣列,最多三層)。

實際樣子

回到頂端

CommonControlBackToTop

components/Common/Control/BackToTop.vue

已掛在 layouts/default.vue 與 layouts/custom.vue 的 #sideField 裡,一般不需要自己放。

捲超過 threshold(預設 400px)才出現, 走 Lenis 的 scrollTo; prefers-reduced-motion 時退回原生捲動。 捲到頂後會把焦點交給頁首地標。

這頁使用 UI Kit 版型,看實際效果請到前台任一頁往下捲。

<!-- 已掛在 layouts/default.vue 的 #sideField,一般不用自己放 -->
<CommonControlBackToTop :threshold="400" />

Props

名稱型別預設值說明
thresholdNumber400捲超過幾 px 才出現
labelString'回到頂端'無障礙名稱