带有角材料的垂直制表符 [英] Vertical tabs with Angular Material

问题描述

使用正确的 Angular Material指令，如何将方向更改为垂直?

Using the proper Angular Material directive, how do I change the direction to vertical?

从垂直标签开始:

然后要拖放到mat-select下拉列表下方的内容:

Then want to drop to content below mat-select dropdown:

如果有人不愿意，将努力使 https://stackoverflow.com/a/43389018 适应我的答案不能打败我:)

Will be working on adapting https://stackoverflow.com/a/43389018 into my answer, if someone doesn't beat me to it :)

推荐答案

编写 角度-vertical-tabs .这只是包装@angular/material的 mat-selection-list ，并使用@angular/flex-layout调整方向以适应不同的屏幕尺寸.

Wrote angular-vertical-tabs. This simply wraps @angular/material's mat-selection-list, and uses @angular/flex-layout to reorient for different screens sizes.

<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

这篇关于带有角材料的垂直制表符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！