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>