【Angular系列】6. 自定義tabs組件

這篇我們自定義tabs組件,支持自定義主題色,動態增減隱藏tab,動態選擇tab,禁用tab,自定義tab頭部等。

1. 第一步同樣是新增一個tabs文件夾,新增相應的文件如下:tabs和tab兩個組件,同時添加一個tabheader指令。

2. tabs組件定義如下:可選主題顏色xColor,可選tab順序號(xSelectedIndex和xSelectedIndexChange,這樣就可以達到雙向綁定的效果)。

3. 定義tab組件,包含tab標題(也可是自定義template標題),是否禁用,是否可見(對於權限控制可以用這個input)。

4. 最後,寫一個sample如下:

github地址:https://github.com/KevinZhang19870314/quick-pai/tree/master/projects/x-controls/src/lib/tabs

在線Demo地址:https://stackblitz.com/edit/x-tabs?embed=1&file=src/app/app.component.ts

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章