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

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

Answer 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;
}