首页 文章

带有角度材质的垂直标签

提问于
浏览
5

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

从垂直标签开始:

vertical-tabs screenshot

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

mat-select screenshot

编辑:如果有人不打扰我:)将努力使https://stackoverflow.com/a/43389018适应我的答案:)

1 回答

  • 3

    写了angular-vertical-tabs . 这只是包装 @angular/materialmat-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>
    

    输出

    全宽

    large

    屏幕较小

    small

相关问题