文檔
示例
周邊
問題反饋
獨立組件
擴展組件
演示
調(diào)試預覽
布局
柵格
框架
基本元素
按鈕
表單
導航 / 面包屑
基礎(chǔ)菜單
選項卡
進度條
面板
徽章
時間線
靜態(tài)表格
動畫
輔助元素
組件示例
彈出層
日期與時間選擇
數(shù)據(jù)表格
分頁
下拉菜單
文件上傳
穿梭框
樹形組件
顏色選擇器
滑塊
評分
輪播
模板引擎
流加載
工具模塊
文本行修飾
預覽
查看代碼
幫助
默認風格的Tab
網(wǎng)站設(shè)置
用戶管理
權(quán)限分配
商品管理
訂單管理
1. 高度默認自適應(yīng),也可以隨意固寬。
2. Tab進行了響應(yīng)式處理,所以無需擔心數(shù)量多少。
內(nèi)容2
內(nèi)容3
內(nèi)容4
內(nèi)容5
動態(tài)操作Tab
網(wǎng)站設(shè)置
用戶管理
權(quán)限分配
商品管理
訂單管理
內(nèi)容1
內(nèi)容2
內(nèi)容3
內(nèi)容4
內(nèi)容5
新增Tab項
刪除:商品管理
切換到:用戶管理
Hash地址定位
網(wǎng)站設(shè)置
用戶管理
權(quán)限分配
商品管理
訂單管理
點擊該Tab的任一標題,觀察地址欄變化,再刷新頁面。選項卡將會自動定位到上一次切換的項
內(nèi)容2
內(nèi)容3
內(nèi)容4
內(nèi)容5
簡潔風格的Tab
網(wǎng)站設(shè)置
用戶管理
權(quán)限分配
商品管理
訂單管理
內(nèi)容不一樣是要有,因為你可以監(jiān)聽tab事件(閱讀下文檔就是了)
內(nèi)容2
內(nèi)容3
內(nèi)容4
內(nèi)容5
卡片風格的Tab
網(wǎng)站設(shè)置
用戶管理
權(quán)限分配
商品管理
訂單管理
默認寬度是相對于父元素100%適應(yīng)的,你也可以固定寬度。
2
3
4
5
6
當Tab數(shù)超過一定寬度
網(wǎng)站設(shè)置
用戶管理
權(quán)限分配
商品管理
訂單管理
1. 寬度足夠,就不會出現(xiàn)右上圖標;寬度不夠,就會開啟展開功能。
2. 如果你的寬度是自適應(yīng)的,Tab會自動判斷是否需要展開,并適用于所有風格。
2
3
4
5
6
帶刪除功能的Tab
網(wǎng)站設(shè)置
用戶基本管理
權(quán)限分配
商品管理
訂單管理
1. 我個人比較喜歡卡片風格的,所以你發(fā)現(xiàn)又是以卡片的風格舉例 2. 刪除功能適用于所有風格
2
3
4
5
6
更多我們未能呈現(xiàn)的示例,還有待您在閱讀文檔、以及不斷使用的過程,去深入挖掘。
Layui-BeJSON.com
相關(guān)
Tab元素文檔
常用元素操作