AngularDart Material Design 選項卡

FixedMaterialTabStripComponent

Selector: <material-tab-strip>

選項卡條組件，帶有選項卡樣式按鈕和活動選項卡指示器。

這是材質規格中的「固定」選項卡條，它具備相同大小的選項卡按鈕，而且沒有滾動。

注意：爲了得到高質量的用戶體驗，選項卡條的用戶必須將焦點設置爲新顯示的內容，以便1）選項卡不保留焦點樣式，2）屏幕閱讀器能夠計算已更改的內容。

Inputs:

• activeTabIndex int 

  活動面板的索引，基於0。

  默認值爲0。
   

• tabIds List<String> 
  選項卡按鈕ID列表。
   

• tabLabels List<String> 
  選項卡按鈕標籤列表。

Outputs:

• activeTabIndexChange Stream<int> 
  在tabChange事件觸發後發佈的activeTabIndex更新流。
   
• beforeTabChange Stream<TabChangeEvent> 

  TabChangeEvent實例的流，在選項卡更改以前發佈。

  調用TabChangeEvent＃preventDefault將阻止選項卡更改。
   

• tabChange Stream<TabChangeEvent> 
  選項卡發生更改時發佈的TabChangeEvent實例流。

MaterialTabPanelComponent

Selector: <material-tab-panel>

一個組件，用於建立頂部帶有導航欄的選項卡面板。
Inputs:

• activeTabIndex int 

  活動面板的索引，基於0。

  默認值爲0。
   

• centerTabs bool 

  是否對齊標籤按鈕。

  不然，按鈕從左端（LTR）對齊。

Outputs:

• beforeTabChange Stream<TabChangeEvent> 
  TabChangeEvent實例的流，在選項卡更改以前發佈。
  調用TabChangeEvent＃preventDefault將阻止選項卡更改。
   
• tabChange Stream<TabChangeEvent> 
  選項卡發生更改時發佈的TabChangeEvent實例流。

MaterialTabComponent

Selector: <material-tab>

材質風格的卡片，做爲MaterialTabPanelComponent的一部分顯示或隱藏。

material-tab組件經過label屬性設置按鈕的標籤文本。 能夠使用* deferredContent模板指令延遲實例化選項卡內容。

Inputs:

• label String 
  此選項卡的標籤。

MaterialTabStripExample

MaterialTabPanelExample

MaterialTabStripMixinExample

查看示例，查看源碼。