Angular Material进度微调器在线答案

【问题标题】：Angular Material progress spinner in-lineAngular Material进度微调器在线
【发布时间】：2019-02-06 09:17:15
【问题描述】：

是否可以让Angular Material progress spinner 与文本内嵌并大致与字符大小一致？

我想要类似的东西：

<span>please wait <mat-spinner></mat-spinner></span>

微调器正好与“请稍候”文本对齐。

这可能吗？

我查看了提供的文档和 examples，但似乎都没有提供前进的方向，而且 Google + 搜索 StackOverflow 也没有发现任何结果。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以在包装元素上使用display: flex。要设置它的大小，您可以使用diameter 输入：

<div class="spinner-wrapper">
  <span>please wait</span>
  <mat-spinner [diameter]="12"></mat-spinner>
</div>

.spinner-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

查看工作示例here

【讨论】：

谢谢 - 将其与文本对齐，但不会将大小更改为与字符大致相同的高度
@Stewart_R 你可以使用diameter 输入。我已经更新了答案

【解决方案2】：

您也可以使用 display:inline。你只需要在 span 或 p 标签之间声明 mat-spinner

.spinner{
  display:inline;
}

<div class="spinner">
  <p>please wait <mat-spinner [diameter]="12"> </mat-spinner> </p>
</div>

【讨论】：