带有角材料的垂直标签 [英] Vertical tabs with Angular Material
本文介绍了带有角材料的垂直标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用正确的
然后想要下拉到 mat-select 下拉列表下方的内容:
如果有人不这样做,我将致力于将
小屏幕
Using the proper Angular Material directive, how do I change the direction to vertical?
Starting with vertical tabs:
Then want to drop to content below mat-select dropdown:
EDIT: Will be working on adapting https://stackoverflow.com/a/43389018 into my answer, if someone doesn't beat me to it :)
解决方案
Wrote angular-vertical-tabs. This simply wraps @angular/material
's mat-selection-list
, and uses @angular/flex-layout
to reorient for different screens sizes.
Usage
<vertical-tabs>
<vertical-tab tabTitle="Tab 0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris tincidunt mattis neque lacinia dignissim.
Morbi ex orci, bibendum et varius vel, porttitor et magna.
</vertical-tab>
<vertical-tab tabTitle="Tab b">
Curabitur efficitur eleifend nulla, eget porta diam sodales in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas vestibulum libero lacus, et porta ex tincidunt quis.
</vertical-tab>
<vertical-tab tabTitle="Tab 2">
Sed dictum, diam et vehicula sollicitudin, eros orci viverra diam, et pretium
risus nisl eget ex. Integer lacinia commodo ipsum, sit amet consectetur magna
hendrerit eu.
</vertical-tab>
</vertical-tabs>
Output
Full width
Smaller screen
这篇关于带有角材料的垂直标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文