cssangularangular-material2angular-componentsangular-material-5

Vertical tabs with Angular Material


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

Starting with vertical tabs:

vertical-tabs screenshot

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

mat-select screenshot

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


Solution

  • 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

    large

    Smaller screen

    small