読者です 読者をやめる 読者になる 読者になる

materil-uiのタブ

materil-uiのタブの設計を見る

Tab.jsのほうから見てみる EnhancedButtonでラップ、ここは別に踏み込まない。

Tabでラップするはず childrenをどう処理するか書いてない。

https://github.com/callemall/material-ui/blob/b6f32aee5ed94aa94144de28f94df3fafa9c0404/src/Tabs/Tabs.js#L198 typeとは何者? どうやらstatic変数にtypeでアクセス可能?

https://github.com/callemall/material-ui/blob/b6f32aee5ed94aa94144de28f94df3fafa9c0404/src/Tabs/Tabs.js#L134

https://github.com/callemall/material-ui/blob/b6f32aee5ed94aa94144de28f94df3fafa9c0404/src/Tabs/Tabs.js#L208-L212 cloneElementでtabのcontentとpropsとchildrenを合成 ここがキモ。 タブのchildrenを取得して、ガワとpropsを合成したタブの中身の配列を生成する。

https://github.com/callemall/material-ui/blob/b6f32aee5ed94aa94144de28f94df3fafa9c0404/src/Tabs/Tabs.js#L225 inkBarはleftを使って移動