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; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏静晴轩

jQuery VS JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷。即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替...

4466
来自专栏Java帮帮-微信公众号-技术文章全总结

与Ajax同样重要的jQuery(2)

练习9: ² 点击button 打印radio checkbox select 中选中项的值 <script type="text/javascript" sr...

3085
来自专栏大数据钻研

DIV+CSS初学者需重视的10个简单问题与技巧

DIVCSS初学者往往感觉自己遇到很多莫明其妙的问题,其实只是一些小细节没有引起重视,下面罗列了10个问题与技巧,温故而知新。 一、检查HTML元素是否有拼写错...

2657
来自专栏owent

JQuery扩展插件--提示信息

https://github.com/owt5008137/SimpleMetro

471
来自专栏Java后端技术

HTML标记语法总结

         语法:<标记名>…标记内容…</标记名>,如:<a>这是百度的主页</a>

1642
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML5(二)表单,多媒体新增内容,新增获取操作元素,自定义属性

high:被界定为高的值的范围。 low:被界定为低的值的范围。 max:规定范围的最大值。 min:规定范围的最小值。 optimum: 规定度量的最...

1403
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

5209
来自专栏十月梦想

最大宽度最小宽度

    css3又加入了min-width,min-height,max-with,max-height等属性

683
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

1983
来自专栏前端杂货铺

翻译:如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

3736

扫码关注云+社区