默認風格的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
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)的示例,還有待您在閱讀文檔、以及不斷使用的過程,去深入挖掘。