Размер Angular Материал Slide Toggle (маленький, средний, большой)

Question

Я хочу увеличить размер переключателя слайдов материала на странице моего проекта Angular 8. Я попытался установить большой размер, например:

<mat-slide-toggle size="large" color="primary"></mat-slide-toggle>

Однако, изменение размера с малого, среднего и большого размера ничего не меняет. Остается тот же размер экрана. Я также попытался добавить стиль к компоненту, например так:

mat-slide-toggle {
  height: 100px;
  width: 100px;
}

Но это не меняет размер видимого компонента, но увеличивает div, в котором находится компонент.

Как изменить размер компонента переключения материала?

Answer 1

Это происходит потому, что вы создаете оболочку для этого компонента. Вам нужно стилизовать определенные c классы этого компонента, такие как .mat-slide-toggler-bar и .mat-slide-toggle-thumb с селектором :: ng-deep, если ваши стили инкапсулированы. Вот пример, который поможет вам начать играть с увеличивающимся размером переключателя:

::ng-deep .mat-slide-toggle-bar {
  height: 7px;
  width: 28px;
}

::ng-deep .mat-slide-toggle-thumb {
  height: 10px;
  width: 10px;
}

::ng-deep .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(18px,0,0) !important;
}

::ng-deep .mat-slide-toggle-thumb-container {
    width: 12px;
    height: 12px;
    top: -2px;
}