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

查看示例，查看源码。

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }