web-dev-qa-db-fra.com

Onglets verticaux avec matériau angulaire

En utilisant la directive appropriée Matériau angulaire , comment changer la direction en vertical?

En commençant par les onglets verticaux:

 vertical-tabs screenshot

Ensuite, voulez passer au contenu sous la liste déroulante Mat-Select:

 mat-select screenshot

EDIT: travaillera à adapter https://stackoverflow.com/a/43389018 dans ma réponse, si quelqu'un ne me bat pas à ce sujet :)

cssangularangular-material2angular-componentsangular-material-5
5
A T

A écrit angular-vertical-tabs . Ceci enveloppe simplement @angular/material 's mat-selection-list , et utilise @angular/flex-layout pour réorienter les écrans de différentes tailles.

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>

Sortie

Pleine largeur

 large

Petit écran

 small

3
Samuel Marks

Je suis très nouveau dans Angular et j'ai essayé de créer des onglets verticaux à l'aide d'onglets, Sidenav et mat-action-list. Je devais créer un composant distinct pour les onglets avec des en-têtes masqués (en raison de l'utilisation de ViewEncapsulation.None)

Je ne sais pas encore comment créer du contenu stackblitz. Voici une implémentation très basique. J'espère que ça aide quelqu'un.

app.component.html 

     <mat-sidenav-container class="side-nav-container">
      <mat-sidenav mode="side" opened class="sidenav">
          <mat-action-list>
              <button mat-list-item (click)="index = 0"> tab 1 </button>
              <button mat-list-item (click)="index = 1"> tab 2 </button>
            </mat-action-list>
      </mat-sidenav>
      <mat-sidenav-content>
          <app-tab-content [(index)]=index></app-tab-content>
      </mat-sidenav-content>
    </mat-sidenav-container>

app.component.css 

    .side-nav-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #eee;
    }


    .sidenav {
      width: 200px;
      background: rgb(15,62,9);
    }

    mat-action-list .mat-list-item {
      color : white;
    }

app.component.ts 

    import { Component } from '@angular/core';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      index: number;
    }

tab-content.component.html 

       <mat-tab-group [(selectedIndex)]="index" class="header-less-tabs" animationDuration="0ms">
        <mat-tab> Content 1 </mat-tab>
        <mat-tab> Content 2 </mat-tab>
      </mat-tab-group>

tab-content.component.css 

    .header-less-tabs.mat-tab-group .mat-tab-header {
      display: none;
    }

tab-content.component.ts 

    import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';

    @Component({
      selector: 'app-tab-content',
      templateUrl: './tab-content.component.html',
      styleUrls: ['./tab-content.component.css'],
      encapsulation: ViewEncapsulation.None
    })
    export class TabContentComponent {

      @Input() index: number = 1;

    }
0
Atul Kumbhar