带有角度材质的垂直标签

Question

使用适当的Angular Material指令,如何将方向更改为垂直？

从垂直标签开始:

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

编辑:如果有人不打扰我,我将努力使/sf/answers/3037231291/适应我的答案:)

Answer 1

因此，我认为这并不完美，但它的代码很少，但可以实现这一点，并且似乎与 mat-tabs 的其他功能配合得很好。

.mat-tab-group {
    flex-direction: row !important;
}

.mat-tab-labels {
    flex-direction: column !important;
}

.mat-tab-label-active {
    border-right: 2px solid $primary-color !important;
}

.mat-ink-bar {
    display: none;
}

由于相关类在组件范围之外呈现，因此您必须将封装设置为 ViewEncapsulation.None，注意：这可能会干扰组件样式。

这显然并不能解决动画缺失的问题，但对我来说，突出显示活动条带就足够了，这是我通过简单地隐藏原始墨迹栏并添加模仿它的边框来实现的

Answer 2

编写angular-vertical-tabs。这只是包装@angular/material's 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>

输出

全屏宽度

较小的屏幕

Answer 3

我对 Angular 很陌生，尝试使用 tabs、Sidenav 和 mat-action-list 创建垂直选项卡。我必须为带有隐藏标题的选项卡创建单独的组件（因为 ViewEncapsulation.None 使用）

我还不知道如何创建 stackblitz 内容。这是非常基本的实现。希望它能帮助某人。

应用程序组件.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>

应用程序组件.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;
    }

应用程序组件.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>

选项卡内容.component.css

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

选项卡内容.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;

    }