由於ant Tabs組件結構較復雜,共分三部分敘述,本文為目錄中第二部分(高亮)
目錄
一、組件結構
antd代碼結構
rc-ant代碼結構
1、組件樹狀結構
2、Context使用說明
3、rc-tabs中只在example、test中使用的組件說明
二、Tabs關鍵組件功能實現
1、Tabs(antd)
2、RcTabs
3、Sentinel哨兵
4、InkTabBarNode
三、Tabs的滾動效果
ScrollableTabBarNode
二、Tabs關鍵組件功能實現
1、Tabs(antd)
antd中的Tabs主要控制可編輯態和Tabs額外的按鈕,具體tab功能實現交給rc-Tabs,具體內容見下圖
render方法源碼對照
2、RcTabs
3、Sentinel哨兵
sentinel哨兵負責監聽tab鍵盤事件,tab鍵focus焦點向后移動,shift+tab鍵焦點向前移動
前后關系如下圖所示
代碼
4、InkTabBarNode
inkTabBar為當前active狀態tab下的藍色高亮條,關鍵邏輯在於計算高亮條的高度和偏移量,詳細代碼及邏輯見下圖注釋