Как обозначить обе стороны элемента управления mat-slide-toggle в 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>

Это выглядит так:

Обратите внимание, что стиль "Вкл.", Который является частью переключателя-ползунка коврика, немного отличается от стиля "Вкл. / Выкл.", Которые находятся вне контроля.

Есть ли способ воспроизвести внутреннюю метку с левой стороны переключателя И с правой стороны, без необходимости загружать CSS jiggery-pokery, что я пробовал и не смог сделать?

Answer 1

Добавить курс mat-slide-toggle-content (который определяется материалом angular и применяется к метке) к вашей вторичной метке, а также добавляет следующие три правила 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;
}

Answer 3

Вот небольшое улучшение исходного поста с акцентом на A11Y.

Любой текст, который вы помещаете в открывающие и закрывающие теги переключателя слайдов Angular Material, проецируется в элемент метки внутри этого компонента. Поэтому не помещайте внутрь него какой-либо текст и используйтеaria-labelledbyвместо этого атрибут для метки.

Вам также следует использовать<span>элементы вместо . <mat-label>не делает ничего за пределами компонента поля формы Angular Material и не имеет функциональности A11Y. Это просто неопределенный HTML-элемент без семантики, использованной в исходном сообщении.

Я также позволил себе некоторую вольность с именами классов и CSS. Больше не надо необходимый. Вы можете игнорировать эти изменения.

HTML

      <div class="settings">
  <div class="row">
    <div class="label" id="autoLayoutLabel">
      Automatically adjust display to screen
    </div>
    <div class="control">
      <span>Off</span>
      <mat-slide-toggle
        formControlName="autoLayout"
        aria-labelledby="autoLayoutLabel"></mat-slide-toggle>
      <span>On</span>
    </div>
  </div>
  <div class="row">
    <div class="label" id="portraitLabel">Choose preferred manual layout</div>
    <div class="control">
      <span>Landscape</span>
      <mat-slide-toggle
        formControlName="portrait"
        aria-labelledby="portraitLabel"></mat-slide-toggle>
      <span>Portrait</span>
    </div>
  </div>
</div>

CSS

      .settings {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.row {
  display: flex;
  padding: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.row:last-of-type {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.label {
  flex: 1;
}

.control {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}