我正在尝试设置Material Ui标签的样式。我将代码安排为通常显示标签,并且在每个标签内,您有3个主要类别,其中的项目属于该类别。如您在下面看到的,这是我想到的设计。
这就是我代码中的样子。因此,“开发运营”应该是该列的标题,并且它下方的2张卡片是它的所属项目,但是与其相邻的是下一列,而不是显示它旁边的下一列。
这是我的代码。谁能向我解释我如何使列紧挨着尝试使用伸缩方向的行和列,但是没有运气 HTML:
<mat-tab-group>
<mat-tab *ngFor="let test$ of testArr;" [label]="test$.category">
<ng-template matTabContent>
<div class="skills-colomn" *ngFor="let skillcolumn of test$.subtest">
<div>
<h3>{{skillcolumn.subcat}}</h3>
<mat-card class="skill-name" *ngFor="let skillcard of skillcolumn.items">
<mat-card-title>{{skillcard.skill}}</mat-card-title>
</mat-card>
</div>
<mat-divider [vertical]="true"></mat-divider>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
sccs
.mat-tab-group {
margin-top: 2%;
margin-left: 5%;
width: 85%;
height: 100%;
.skills-colomn {
margin-top: 5%;
width:100%;
height:100%;
display: flex;
flex-direction: row;
.div {
width:50%;
.skill-name {
width: 95px;
height: 95px;
}
}
}
答案 0 :(得分:0)
我发现了我的错误。我需要在具有显示伸缩行的技能列周围添加一个额外的外部div,并且我也以某种方式将div输入为一个类!我不敢相信我没有早点注意到这一点! HTML:
<mat-tab-group>
<mat-tab *ngFor="let test$ of testArr;" [label]="test$.category">
<ng-template matTabContent >
<div>
<div class="skills-colomn" *ngFor="let skillcolumn of test$.subtest">
<div>
<h3>{{skillcolumn.subcat}}</h3>
<mat-card class="skill-name" *ngFor="let skillcard of skillcolumn.items">
<mat-card-title>{{skillcard.skill}}</mat-card-title>
</mat-card>
</div>
<mat-divider [vertical]="true"></mat-divider>
</div>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
scss:
.mat-tab-group {
margin-top: 2%;
margin-left: 5%;
width: 85%;
height: 100%;
div{
display: flex;
flex-direction: row;
.skills-colomn {
display: flex;
flex-direction: row;
div {
display: flex;
flex-direction: column;
}
}
}