antd源碼分析之——標簽頁(tabs 2.Tabs關鍵組件功能實現)


由於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下的藍色高亮條,關鍵邏輯在於計算高亮條的高度和偏移量,詳細代碼及邏輯見下圖注釋

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM