angular - mat-tab-group - 将项目与中心、左右对齐
问题描述
是否可以使用 mat-tab-group 对齐中心、右侧和左侧按钮?我正在使用垫标签。如何将名称左侧的元素放置在左侧,中心名称的元素放在中心,名称右侧的元素放在右侧?
我试图用它mat-align-tabs="center"
来居中一些元素,但即使这样也没有用。
我使用了以下,但它只在一种情况下有效......我无法对齐三个部分(中心、右侧和左侧)中的项目。
.mat-tab-labels {
display: flex;
justify-content: center !important;
}
有人可以帮我将元素放在左侧、中间和右侧,并使所有按钮都适合屏幕吗?
代码
<mat-sidenav-container fxFlexFill>
<mat-sidenav-content fxFlexFill>
<mat-tab-group mat-align-tabs="center">
<mat-tab label="Left">Content 1</mat-tab>
<mat-tab label="Left">Content 2</mat-tab>
<mat-tab label="Center">Content 3</mat-tab>
<mat-tab label="Center">Content 4</mat-tab>
<mat-tab label="Center">Content 5</mat-tab>
<mat-tab label="Center">Content 6</mat-tab>
<mat-tab label="Right">Content 7</mat-tab>
<mat-tab label="Right">Content 8</mat-tab>
<mat-tab label="Right">Content 9</mat-tab>
<mat-tab label="Right">Content 10</mat-tab>
<mat-tab label="Right">Content 11</mat-tab>
</mat-tab-group>
</mat-sidenav-content>
</mat-sidenav-container>
例子
解决方案
尝试这样的事情:
<mat-sidenav-container fxFlexFill>
<mat-sidenav-content fxFlexFill>
<mat-tab-group mat-align-tabs="center">
<mat-tab label="Left">Content 1</mat-tab>
<mat-tab label="Left">Content 2</mat-tab>
<mat-tab class="center"label="Center">
<div class="center">Content 3 </div>
</mat-tab>
<mat-tab label="Center">
<div class="center">Content 4 </div>
</mat-tab>
<mat-tab label="Right">
<div class="right">Content 5</div>
</mat-tab>
<mat-tab label="Right">
<div class="right">Content 6 </div>
</mat-tab>
</mat-tab-group>
</mat-sidenav-content>
</mat-sidenav-container>
scss:
.center {
@at-root div#{&} {
text-align : center;
}
}
.left {
@at-root div#{&} {
text-align : left;
}
}
.right {
@at-root div#{&} {
text-align : right;
}
}
直播:https ://stackblitz.com/edit/angular-kjcfx2?file=src%2Fstyles.scss
推荐阅读
- python - 如何有效地使用 CountVectorizer 来组合目录中所有文件的 ngram 计数?
- python - 如何制作一个显示具有特定关键字的行的列?
- google-sheets - Importrange公式查询
- android - 在 Recycler 视图中充气
- laravel-5 - 如何解决这个 Laravel 错误(错误号:150“外键约束格式不正确”)?
- postgresql - 自加入时正确选择生效日期
- clearcase - 如何处理 ClearCase -exec 命令字符串中的 shell 元字符?
- node.js - 如何从 hbs 分配 index.js 文件中存在的路由?
- javascript - 单击按钮时不显示隐藏的表单
- powershell - Powershell ProgressBar 失败