如何在 Angular/Material 8 中标记 mat-slide-toggle 控件的两侧？答案

【问题标题】：How to label both sides of a mat-slide-toggle control in Angular/Material 8?如何在 Angular/Material 8 中标记 mat-slide-toggle 控件的两侧？
【发布时间】：2020-01-31 21:17:41
【问题描述】：

我在设置屏幕上使用 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 负载已经？

【问题讨论】：

标签： css angular-material-8

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在你的模块中：

import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatFormFieldModule  } from '@angular/material/form-field';
...
@NgModule({
  declarations: [...],
  imports: [
    ...
    MatSlideToggleModule,
    MatFormFieldModule 
  ],
  exports: []
})

在您的 html 中：

<div class="container">
  <div class="row ">
    ...
    <div class="col ">
        <mat-label ngClass="labelBeforeSlide">Off</mat-label>
        <mat-slide-toggle>On</mat-slide-toggle>
    </div>
    ...

在你的 CSS 中：

.labelBeforeSlide {
  vertical-align: top;
  line-height: 24px; 
  margin-right:0.5rem;
  margin-bottom:0.5rem;
}

【讨论】：