带角度材质的垂直选项卡

已写入 angular-vertical-tabs .这只是包装 @angular/material 的 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>

输出

全宽度

更小的屏幕

我对Angular非常陌生,尝试使用tabs、Sidenav和mat action list创建垂直选项卡。我必须为带有隐藏标题的选项卡创建单独的组件(因为视图封装。无使用)

我还不知道如何创建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;
    }

选项卡内容。组成部分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>

选项卡内容。组成部分css

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

选项卡内容。组成部分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;

    }

因此,在我看来,这并不完美,但它的代码非常少,可以做到这一点,而且似乎与mat选项卡的其他功能配合得很好。

.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;
}

由于相关类在组件的范围之外呈现,因此必须将封装设置为ViewEnclosuration。无,请注意:这可能会影响组件样式。

这显然不能解决缺少动画的问题,但对我来说,只需隐藏原始墨迹条并添加一个模仿墨迹条的边框,活动条就可以高亮显示

对于使用角度材质的垂直选项卡,请使用以下代码。

HTML

<div class="container">
  <div id="content">
    <div id="main-content">
      <mat-tab-group>
        <mat-tab label="Tab One">
          Tab One Content
        </mat-tab>
        <mat-tab label="Tab Two">
          Tab Two Content
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>
</div>

SCSS公司

:host {
    >.container {
        max-width: 1264px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        background: none;
    }
    /deep/ {
        .mat-tab-group {
            flex-direction: row;
        }
        .mat-tab-header {
          border-bottom: none;
        }
        .mat-tab-header-pagination {
            display: none !important;
        }
        .mat-tab-labels {
            flex-direction: column;
        }
        .mat-ink-bar {
            height: 100%;
            left: 98% !important;
        }
        .mat-tab-body-wrapper {
            flex: 1 1 auto;
        }
    }
}

.container {
    position: relative;
    width: 100%;
    flex: 1 0 auto;
    margin: 0 auto;
    text-align: left;
}

#content {
    box-sizing: content-box;
    margin: 0 auto;
    padding: 15px;
    width: 1264px;
    background-color: #ffffff;
}

#content {
    max-width: 1100px;
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
    box-sizing: border-box;
}

#content,
#main-content {
    &::before,
    &::after {
        content: "";
        display: table;
    }
    &::after {
        clear: both;
    }
}

Stackblitz Demo 在这里

我已经创建了一个垂直选项卡,我觉得这是一个更好的选项卡。

应用程序。组成部分html

<mat-tab-group [@.disabled]="true" >
    <mat-tab>
        <ng-template mat-tab-label>
            <mat-icon>home</mat-icon>Home
        </ng-template>
        <div>Content 1</div>
    </mat-tab>
    <mat-tab>
        <ng-template mat-tab-label>
            <mat-icon>login</mat-icon>Login
        </ng-template>
        Content 2
    </mat-tab>
    <mat-tab>
        <ng-template mat-tab-label>
            <mat-icon>code</mat-icon>Code 
        </ng-template>
        Content 3
    </mat-tab>
</mat-tab-group>

应用程序。组成部分css

:host {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:host ::ng-deep .mat-tab-labels {
  flex-direction: column;
}

mat-tab-group {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}

:host ::ng-deep .mat-tab-body-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

mat-tab-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

:host ::ng-deep mat-ink-bar {
  display: none;
}

/* Styles for the active tab label */
:host ::ng-deep.mat-tab-label.mat-tab-label-active {
    background-color: transparent;
    color: red;
    background-color: yellow;
    border-right: 2px solid red;
}
/* Styles for the active tab label */
:host ::ng-deep.mat-tab-label {
    background-color: transparent;
    /* background-color: lightgray; */
}

屏幕截图 :

Stackblitz演示 : https://stackblitz.com/edit/angular-verticall-tabs