文档章节

AngularDart Material Design 选项卡

scooplol
 scooplol
发布于 2018/09/11 21:20
字数 489
阅读 10
收藏 0

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

查看示例,查看源码

© 著作权归作者所有

共有 人打赏支持
scooplol
粉丝 15
博文 103
码字总数 205785
作品 0
南充
程序员
私信 提问
AngularDart 现已全面采用 Dart 开发

一直以来,Angular 2依然采用TypeScript作为主流开发语言,然后自动编译成JavaScript 和 Dart。Dart开发者一直在进行Angular 2拆分,将其分为TypeScript/JavaScript版本和Dart版本,并成立了...

oschina
2016/07/21
6K
25
AngularDart Material Design 卡片

自述 Material Card 材料卡是由Google材料团队(也称为mdc-web)提供的卡片样式。 这是一个允许在AngularDart应用程序中使用样式的包装器。 有关如何使用这些样式的文档,请参阅mdc文档。 可...

scooplol
2018/09/09
0
0
AngularDart 3.0:轻松升级,性能更好

AngularDart 3.0 现已推出。它带来更好的性能和更少的代码生成,加速开发效率。 3.0 版本尽管有一些突破性的变化,但由于 public API 的调整极少,可以看成是一个平滑的升级。主要改进在于代...

王练
2017/05/06
2.6K
4
谷歌的 “Dart ”编程语言重返舞台

谷歌 Dart 曾经踌踌满志地想要取代 JavaScript 成为 Web 开发的首选语言。然而在一年半前,谷歌放弃了这个想法。因为 Dart 不仅仅在语言本身,包括它的整个生态圈,都比 JavaScript 落后了一...

局长
2016/11/13
5.5K
10
AngularDart Material Design 按钮

MaterialButtonComponent Selector:<material-button> 平面或凸起按钮,带有可选的波纹效果。 Attributes: 以下属性通常与<material-button>一起使用: icon:如果存在,则删除按钮的最小宽度...

scooplol
2018/09/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

创建多个git账号

实习开发中我们可能一个机子上配置多个git账号,如github.com,oschina.com 或者工作账号,私人账号,这时候就2个账号用一个key,肯定会冲突,有一个会提示没权限(账号和密码对应不上) ssh ...

echojson
28分钟前
1
0
rabbitmq安装教程

RabbitMQ有Windows与Linux版本的,这里先写Windows版本的安装。 以前安装软件总是在百度上找某某安装教程,结果能按照教程安装好的软件真的不多。想起先前以为大牛说的一句话,去官网按照官网...

em_aaron
今天
7
0
Android 贝塞尔曲线实践——波浪式运动

一、波浪效果如下 贝塞尔曲线自定义波浪效果的案例很多,同样方法也很简单,大多数和本案例一样使用二次贝塞尔曲线实现,同样还有一种是PathMeasure的方式,这里我们后续补充,先来看贝塞尔曲...

IamOkay
今天
3
0
Nmap之防火墙/IDS逃逸

选项 解释 -f 报文分段 --mtu 指定偏移大小 -D IP欺骗 -sI 原地址欺骗 --source-port 源端口欺骗 --data-length 指定发包长度 --randomize-hosts 目标主机随机排序 --spoof-mac Mac地址欺骗 ...

Frost729
今天
2
0
带你搭一个SpringBoot+SpringData JPA的环境

不知道大家对SpringBoot和Spring Data JPA了解多少,如果你已经学过Spring和Hibernate的话,那么SpringBoot和SpringData JPA可以分分钟上手的。 其实我在学完SpringBoot和SpringData JPA了之...

java菜分享
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部