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

查看示例，查看源码。

来源：oschina

链接：https://my.oschina.net/u/3647851/blog/2049813