Question

我正在尝试设置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;
                                }
                            }

                    }

Answer 1

我发现了我的错误。我需要在具有显示伸缩行的技能列周围添加一个额外的外部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;


                        }
                    }
                }

角材料UI连续显示选项卡内容

1 个答案: