使用适当的Angular Material directive,如何将方向更改为垂直?
从垂直标签开始:
然后要拖放到mat-select下拉列表下方的内容:
编辑:如果有人没有击败我,将努力使https://stackoverflow.com/a/43389018适应我的回答:)
写angular-vertical-tabs。这仅包装@angular/material
的mat-selection-list
,并使用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非常陌生,并尝试使用选项卡,Sidenav和mat-action-list创建垂直选项卡。我必须为带有隐藏标题的选项卡创建单独的组件(由于ViewEncapsulation.None用法)
我还不知道如何创建stackblitz内容。这是非常基本的实现。希望它能对某人有所帮助。
app.component.html
app.component.css
<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.ts
.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;
}
tab-content.component.html
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.css
<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.ts
.header-less-tabs.mat-tab-group .mat-tab-header {
display: none;
}
所以我认为这不是完美的,但是它的代码很少,可以解决问题,并且似乎可以与mat-tabs的其他功能很好地工作。
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;
}
由于相关类在组件范围之外呈现,因此您必须将封装设置为ViewEncapsulation。请注意:这可能与组件样式混为一谈。
这显然不能解决动画不足的问题,但是对我来说,活动条被高亮显示就足够了,我只需隐藏原始墨水栏并添加一个模仿它的边框就可以实现