简体   繁体   English

带有角材料的垂直标签

[英]Vertical tabs with Angular Material

Using the proper Angular Material directive , how do I change the direction to vertical?使用正确的Angular Material 指令,如何将方向更改为垂直?

Starting with vertical tabs:从垂直制表符开始:

垂直标签截图

Then want to drop to content below mat-select dropdown:然后想下拉到 mat-select 下拉列表下面的内容:

垫选择屏幕截图

EDIT: Will be working on adapting https://stackoverflow.com/a/43389018 into my answer, if someone doesn't beat me to it :)编辑:将致力于将https://stackoverflow.com/a/43389018调整为我的答案,如果有人没有打败我:)

Wrote angular-vertical-tabs .编写angular-vertical-tabs This simply wraps @angular/material 's mat-selection-list , and uses @angular/flex-layout to reorient for different screens sizes.这只是简单地包装了@angular/materialmat-selection-list ,并使用@angular/flex-layout为不同的屏幕尺寸重新定向。

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全宽

大

Smaller screen较小的屏幕

小

I am very new to Angular and tried to create vertical tabs using tabs, Sidenav and mat-action-list.我对 Angular 非常陌生,并尝试使用选项卡、Sidenav 和 mat-action-list 创建垂直选项卡。 I had to create separate component for tabs with hidden headers (because of ViewEncapsulation.None usage)我必须为带有隐藏标题的选项卡创建单独的组件(因为 ViewEncapsulation.None 使用)

I don't know how to create stackblitz content yet.我还不知道如何创建 stackblitz 内容。 Here is very basic implementation.这是非常基本的实现。 Hope it helps someone.希望它可以帮助某人。

app.component.html应用程序组件.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应用组件.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 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 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 tab-content.component.css

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

tab-content.component.ts 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;

    }

Use the below code for the vertical tab using angular material.使用以下代码为使用角材料的垂直选项卡。

HTML 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 hereStackblitz 演示在这里

So this is not perfect in my opinion but its very little code, does the trick and seems to work well with the other features of mat-tabs.所以在我看来这并不完美,但它的代码很少,可以解决问题并且似乎与 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;
}

Since the relevant classes are rendered outside the scope of the component, you will have to set encapsulation to ViewEncapsulation.None, note: this might meddle with the component styles.由于相关类在组件范围之外呈现,您必须将封装设置为 ViewEncapsulation.None,注意:这可能会干扰组件样式。

This obviously does not solve the lack of animation but for me it was enough that the active strips gets highlighted which I achieved by simply hiding the original ink-bar and adding a border which mimics it这显然不能解决缺乏动画的问题,但对我来说,突出显示活动条就足够了,我只需隐藏原始墨水栏并添加模仿它的边框即可实现

I have created a vertical tab, I feel this is a better one.我创建了一个垂直选项卡,我觉得这是一个更好的选项卡。

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

app.component.css应用组件.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; */
}

Screenshot :截图

在此处输入图片说明

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM