如何在图标angular mat toolbar 下放置文字
How to place text under the icon angular mat tool bar
我想在 angular 垫选项卡
中的图标下方放置图标文本
<mat-toolbar>
<span class="spacer"></span>
<button type="button" (click)="printBillOfLading()" mat-icon-button>
<mat-icon>print</mat-icon>
<!-- I NEED TO PUT PRINT LABLE IN HERE -->
</button>
</mat-toolbar>
您真的想要按钮内的文本吗?我的意思是圆圈内的文字?或者在外面?
问题是,必须展开按钮,以便您的文本适合该按钮。否则它不会因为溢出而不可见。我建议您将文本放在外面,只需将(单击)添加到您的容器上即可。
CSS:
.example-button-container{
display: flex;
justify-content: center;
flex-direction: column;
width: 120px;
}
HTML:
<div class="example-button-container">
<button mat-fab color="primary" aria-label="Example icon button with a delete icon">
<mat-icon>print</mat-icon>
</button>
<span>Print</span>
</div>
我想在 angular 垫选项卡
中的图标下方放置图标文本<mat-toolbar>
<span class="spacer"></span>
<button type="button" (click)="printBillOfLading()" mat-icon-button>
<mat-icon>print</mat-icon>
<!-- I NEED TO PUT PRINT LABLE IN HERE -->
</button>
</mat-toolbar>
您真的想要按钮内的文本吗?我的意思是圆圈内的文字?或者在外面?
问题是,必须展开按钮,以便您的文本适合该按钮。否则它不会因为溢出而不可见。我建议您将文本放在外面,只需将(单击)添加到您的容器上即可。
CSS:
.example-button-container{
display: flex;
justify-content: center;
flex-direction: column;
width: 120px;
}
HTML:
<div class="example-button-container">
<button mat-fab color="primary" aria-label="Example icon button with a delete icon">
<mat-icon>print</mat-icon>
</button>
<span>Print</span>
</div>