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