带有 Angular 材质的垂直选项卡

Question

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

从垂直标签开始：

然后想下拉到 mat-select 下拉列表下面的内容：

编辑：如果有人不打败我，将努力将 https://stackoverflow.com/a/43389018 改编为我的答案:)

原文由 A T 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

输出

全屏宽度

更小的屏幕

原文由 Samuel Marks 发布，翻译遵循 CC BY-SA 3.0 许可协议