如何設置 angular2 材質滑動切換按鈕的樣式

Question

我是 angular 2 和材料設計的新手。 我想知道如何將滑動切換按鈕的樣式設置得更小。

 <div class="example-section">
  <mat-slide-toggle class="line-toggle"
    <span class="font-size-12">Slide Me</span>
  </mat-slide-toggle>
</div>

css如下

  .example-section {
  display: flex;
  align-content: center;
  align-items: center;
  height: 18px;
  margin-top: -12px;
}
 .line-toggle{
  height: 10px;
  line-height: 8px;
 }

我想減小按鈕的大小並降低滑塊的高度。

Answer 1

我發現您可以在 css 中使用 /deep/ 但您還必須針對特定的類。

/deep/ .mat-slide-toggle-bar {
  height: 7px !important;
}
/deep/ .mat-slide-toggle-thumb {
  height: 10px !important;
  width: 10px !important;
}

要記住的另一件事是 viewEncapsulation 因為 deep 允許您打破這種約定，因為樣式是通過 Angular 設置的，它們是內聯應用的。

相關堆棧帖子： 如何覆蓋 angular 2 材質樣式？

相關 Angular 文檔： https : //angular.io/guide/component-styles#!#-deep-

Answer 2

@tallgeese117 的回答真的很有幫助。 我想在他們的答案中添加更多的代碼行，以便它以所需的大小顯示切換並看起來：

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

/deep/ .mat-slide-toggle-thumb {
  height: 10px !important;
  width: 10px !important;
}

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

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

Answer 3

我使用了上面@tallgeese117 提供的解決方案。 但是在 VScode 中，CSS 文件顯示為紅色（ \\deep\\ ），這很煩人。 我找不到忽略此 css lint 檢查的方法。 因此我嘗試了另一種選擇（動態更改 css ）。 我把它貼在下面給別人：

    ngOnInit() {
        let eleArray = document.getElementsByClassName('mat-slide-toggle-content');
        for(let i = 0 ; i < eleArray.length; i++) {
          // @ts-ignore
          eleArray[i].style.cssText = 'font-size:6vw;';
        }
    }

Answer 4

正如其他人提到的，您需要設置 mat-slide-toggle（mat-slide-toggle-bar、mat-slide-toggle-thumb 等）的內部類的樣式。 但是， /deep/ 和 ::ng-deep 已棄用，因此您不應使用它們。 一種選擇是設置比組件上的默認樣式更具體的全局樣式。 因此，在全局樣式文件中，您可以執行以下操作：

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-bar {
  height: 8px;
  width: 26px;
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-thumb {
  height: 14px;
  width: 14px;
}

//...etc

組合組件名稱和類名稱比 mat-slide-toggle 默認樣式更具特異性，因此它會覆蓋它。

參考：

• https://material.angular.io/guide/customizing-component-styles#styling-overlay-components
• https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep