【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 2021-07-06
      • 2017-05-14
      • 1970-01-01
      • 2019-05-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-02-15
      • 1970-01-01
      相关资源
      最近更新 更多