如何在 Angular/Material 8 中标记垫滑动切换控件的两侧？

Question

我在设置屏幕上使用 mat-slide-toggle 来显示各种“这个或那个”选项，例如：

<div class="row">
    <div class="column">
        Automatically adjust display to screen
    </div>
    <div class="column">
        <mat-label>Off&nbsp;</mat-label>
        <mat-slide-toggle formControlName="autoLayout">On</mat-slide-toggle>
        <mat-label>&nbsp;On</mat-label>
    </div>
</div>

<div class="row">
    <div class="column">
        Choose preferred manual layout
    </div>
    <div class="column">                            
        Landscape&nbsp;<mat-slide-toggle formControlName="portrait"></mat-slide-toggle>&nbsp;Portrait
    </div>
</div>

看起来像这样：

请注意，作为 mat-slide-toggle 一部分的“On”的样式与控件外部的 Off/On 的样式略有不同。

有没有什么方法可以在切换开关的左侧和右侧复制内部标签，而不必执行大量 CSS jiggery-pokery（我已经尝试过但失败了）？

Answer 1

将类mat-slide-toggle-content（由角度材质定义并应用于标签）添加到辅助标签，并将以下三个 CSS 规则附加到标签。

vertical-align: top;
display: inline-block;
line-height: 24px; // this is defined in .mat-slide-toggle