版型元件
頁首、頁尾,以及兩個無障礙相關的輔助元件。這些多半已經掛在 layout 裡,一般頁面不需要自己放。
頁首
LayoutHeadercomponents/Layout/Header.vue
目前是不吃 props 的靜態頁首:Logo、UI KIT、GITLAB 連結。 內容直接改元件本身,之後若要接後台選單資料, 可參考 ntcart 的 LayoutPageHeader 做法 (傳入 headerMenu 陣列,最多三層)。
跳至主要內容
AtomSkipLinkcomponents/Atom/SkipLink.vue
放在 layout 最前面,平常隱藏,Tab 第一下才會出現。 只用鍵盤的人靠它跳過整段導覽列。
在這一頁按 Tab 就會看到它從左上角滑出來。
<!-- 放在 layout 最前面,Tab 第一下就會聚焦到它 -->
<AtomSkipLink />Props
回到頂端
CommonControlBackToTopcomponents/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" />