返回元件總覽

ENGINEERING UI CATALOG

版面元件

頁首、步驟進度、內容容器與頁面底部操作區的組合方式。

UIPageTopNav

頂部導覽

本頁最上方即為元件的即時範例,包含首頁、UI 目錄、登入與帳號下拉入口。

↑ 請直接操作目前視窗最上方的 TopNav。

查看使用方式
<UIPageTopNav />
UIPageProgressSteps

預約步驟

current 接受 1、2、3,分別呈現未完成、目前與已完成的步驟狀態。

2
3
查看使用方式
<UIPageProgressSteps :current="2" />
UIPageScreenBody

頁面內容容器

限制內容最大寬度並提供預設內容與 footer slot。展示環境縮短了最小高度。

主要頁面內容
Footer slot
查看使用方式
<UIPageScreenBody><section>內容</section><template #footer>頁尾</template></UIPageScreenBody>
UIPageFooterButtonBox

頁尾按鈕容器

手機版固定於視窗底部、桌面版回到文件流;目錄中固定模式已限制於展示區。

查看使用方式
<UIPageFooterButtonBox><UIButtonPageBottom>下一步</UIButtonPageBottom></UIPageFooterButtonBox>