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

Question

我在设置屏幕上使用 mat-slide-toggle 来显示各种 "this or that" 选项，例如：

<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

将 class mat-slide-toggle-content（由 angular material 定义并应用于标签）添加到您的辅助标签，并将以下三个 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;
}

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

How to label both sides of a mat-slide-toggle control in Angular/Material 8?

css

angular-material-8