最近在思考有關Tab「極端」情況的設計。

先從Bootstrap 框架說起。Bootstrap 頁面框架中的漢堡包導航方式無處不在，看兩個典型的例子-->>

hamburger-1

hamburger-2

以上導航的方式，一種是剛開始就以漢堡包折疊了起來，另一種則是當頁面窄到某一數值，就將菜單折疊起來變成漢堡包。講真，總有一種強行加特技的趕腳。好端端的導航，卻要隱藏起來，徒增切換成本。隱藏起來頁面的確會顯得更簡潔，但在切換時多了一步操作，用戶更容易分心。

再放一個在小屏幕上展開的圖：

hamburger-滾動

一展開，全屏幕都是導航Tab，每個Tab 獨占一行，大概是想要上天？

是病得治，Material Design 設計規(guī)范如是說-->>Tabs - Components - Google design guidelines. 現在越來越多的移動應用拋棄了漢堡包，取而代之的是垂直兩端的Tab 導航欄。

正如上圖所示，沒有那么寬，還要霸占一行的位置→_→，順便把內容都擠下去了。于是我在思考，如果有較多的Tab，優(yōu)先考慮橫向排列，至于小屏溢出部分則可以左右切換。

用戶往往更青睞于滑動、滾動的操作，而討厭反復點擊。幸運的是，Angular Material 就是這么做的！當標簽位置超出窗口尺寸，便可以橫向滑動進行切換。

Angular Tabs demo

順著這個思路，我做了個對應的二級Tab 導航demo：

為了節(jié)省屏幕空間，也可以省略兩端的方向圖標。codepen 鏈接戳這里.