#mat-tab-group Vertical

7 messages · Page 1 of 1 (latest)

mint lynx
#

I am trying to make the mat-tab-group vertical, but Angular Material does not have such a component. How can I make the mat-tab-group vertical?

pure walrus
#

You need to have custom implement as Angular material doesn' provide that. I Implemented by overriding default mat-tab-label syles

I am sharing example of mine but you would need to apply custom css based on your requirements for

  • mat-tab-label
  • mat-tab-label-active

flex-direction: column

 .mat-tab-label-container {
    overflow-y: auto;

    .mat-tab-labels {
      flex-direction: column;
      flex-grow: 1;

      & .mat-tab-label {
        height: 55px;
        border: 1px solid #ccc;
        border-radius: 4px 4px 0 0;
        margin-right: 2px;
        justify-content: flex-start;
      }

      & .mat-tab-label-active {
        border-bottom: 1px solid #ccc;
      }
    }
  }
mental patio
#

This solution looks neat.
But always remember that customizing material style and behaviour is highly discouraged.
Material is a design system that should be taken "as-is", with as little space for customization as the properties its components expose.
The risk is to find it hard updating the lib, or just looking at strange behaviour for setup not take into consideration in the beginning.
When there's a need for a "big" editing like this one, IMHO I'd look at some other UI lib, trying to make its needed component look as "materialish" as possible.

pure walrus
#

@mental patio
100% Agreed, I just shared a snippet becasue the application I was working was a legacy app (3yrs now) and it was hard requirement to implement via Vertical tabs.

Just for curiosity Any lib that has components look as "materialish" as possible.?

Any good UI libs to be taken into consideration from Future POV?

thx

willow raft
#

I can recommend PrimeNG, they have a Material theme, too.

jovial olive
#

You could use a sidenav containing a mat-nav-list, with the router loading a component in the main content area.

pure walrus