css - 带有 Angular Material 的垂直标签

Question

使用正确的 Angular Material directive , 如何将方向更改为垂直？

从垂直制表符开始:

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

编辑:将致力于改编 https://stackoverflow.com/a/43389018进入我的回答，如果有人没有打败我:)

Answer 1

写了angular-vertical-tabs .这只是包装了 @angular/material 的 mat-selection-list ，并使用 @angular/flex-layout 为不同的屏幕尺寸重新定向。

用法

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

输出

全宽

较小的屏幕