應用殼層與面板元件
側欄、命令面板、分頁列、工具列、多欄工作區。做後台與 SaaS 介面的骨架,重點是在小螢幕上收得起來、在大螢幕上不浪費空間。
共 19 個,其中 13 個免費、不需登入即可安裝。
三欄工作區殼層:導航欄+列表欄+詳情欄的主從式應用殼層,內建完整響應式狀態機:面板可摺疊成圖示欄、平板降級為覆蓋層、手機轉為逐頁推進,所有轉換以彈簧序列編排。
停靠檢視欄:右側上下文檢查器面板以推擠模式展開,主內容同步以寬度動畫重排而非被遮罩覆蓋,面板內分節可摺疊並支援拖曳調整寬度。
錨點設定頁框架:左側 scroll-spy 錨點導覽、右側設定區塊的兩欄設定頁版面,捲動時導覽指示器平滑跟隨目前區塊,表單有未儲存變更時底部儲存列以彈簧滑入。
安裝引導進度欄:固定於應用側邊的 onboarding 檢查清單面板,完成項目時打勾、該列摺疊並以計數動畫推進頂端進度環,全部完成後整條欄位縮小為可展開的浮動徽章。
通知分流面板:依日期與來源分組的通知中心面板版面,含未讀/全部分頁、群組摺疊與批次清除,清除時項目依序橫掃離場、群組高度以彈簧收合補位。
米勒欄層級瀏覽版面:Finder 式多欄層級版面,每深入一層就從右側彈簧推入一欄,超出寬度時整排平滑橫移,並以麵包屑同步高亮當前路徑。
彈性分割工作區:多欄可拖曳分割的面板工作區版面,分隔線拖曳帶彈簧物理回饋,面板可一鍵收合成細條或展開至預設比例,收合時鄰近面板以寬度彈性動畫即時重排。
專注模式殼層:一鍵進入專注模式時側欄、頂欄與輔助面板依 GSAP 時間軸依序淡出滑離,主內容緩動重新置中放大,退出時逆向編排復原整個殼層。
滑覆浮動面板:一塊非模態的窄版浮動面板滑覆於內容之上,可拖曳磁吸至左右任一側、快甩即收合為邊緣把手,全程彈簧跟手。
控制中心面板:由玻璃模組方塊組成的控制面板網格,長按任一控制會原地彈簧放大為精細控制卡(滑桿、分段切換),背景同步模糊下沉,放開回彈歸位。
迷你播放器展開層:常駐底部的迷你播放列,點按後封面以共享元素放大、整層彈簧展開為全螢幕播放頁,下拉依手勢速度回收為迷你列。
大標題摺疊頁首:iOS 式大標題頁首在捲動時以共享元素縮移為置中小標題,下拉可拉出搜尋列並帶橡皮筋回彈,各區段標題依序吸附在頁首之下。
視窗裝飾工具列:工具列如 visionOS ornament 懸浮於內容面板邊緣之外、略帶 Z 軸抬升與跟隨視差,捲動時自動縮合為膠囊、停下時展開完整控制。
列表+閱讀窗格的郵件收件匣,選取滑動高亮、未讀徽章
檔案/資料夾網格,框選多選、右鍵選單與檢視切換
月曆與當日議程聯動的行事曆面板,事件色籤
按 ? 呼出的快捷鍵速查浮層:分組列表、kbd 鍵帽、搜尋過濾
取一個主色自動衍生和諧配色:色卡翻牌、一鍵複製、鎖定重骰
拖曳色停駐點編輯漸層:角度旋鈕、CSS 一鍵複製、預設庫