Skip to content

Commit 0a4712c

Browse files
committed
docs(material/slide-toggle): Update description and examples for color input description on API page (#29334)
(cherry picked from commit caeb3e8)
1 parent ac9e524 commit 0a4712c

File tree

4 files changed

+8
-24
lines changed

4 files changed

+8
-24
lines changed

src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.html

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,6 @@
11
<mat-card>
22
<mat-card-content>
3-
<h2 class="example-h2">Slider configuration</h2>
4-
5-
<section class="example-section">
6-
<label class="example-margin">Color:</label>
7-
<mat-radio-group [(ngModel)]="color">
8-
<mat-radio-button class="example-margin" value="primary">
9-
Primary
10-
</mat-radio-button>
11-
<mat-radio-button class="example-margin" value="accent">
12-
Accent
13-
</mat-radio-button>
14-
<mat-radio-button class="example-margin" value="warn">
15-
Warn
16-
</mat-radio-button>
17-
</mat-radio-group>
18-
</section>
3+
<h2 class="example-h2">Slide toggle configuration</h2>
194

205
<section class="example-section">
216
<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
@@ -34,7 +19,6 @@ <h2 class="example-h2">Result</h2>
3419
<section class="example-section">
3520
<mat-slide-toggle
3621
class="example-margin"
37-
[color]="color"
3822
[checked]="checked"
3923
[disabled]="disabled">
4024
Slide me!

src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {Component} from '@angular/core';
2-
import {ThemePalette} from '@angular/material/core';
32
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
43
import {MatCheckboxModule} from '@angular/material/checkbox';
54
import {FormsModule} from '@angular/forms';
@@ -17,7 +16,6 @@ import {MatCardModule} from '@angular/material/card';
1716
imports: [MatCardModule, MatRadioModule, FormsModule, MatCheckboxModule, MatSlideToggleModule],
1817
})
1918
export class SlideToggleConfigurableExample {
20-
color: ThemePalette = 'accent';
2119
checked = false;
2220
disabled = false;
2321
}

src/material/slide-toggle/slide-toggle-config.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,13 @@ export interface MatSlideToggleDefaultOptions {
1313
/** Whether toggle action triggers value changes in slide toggle. */
1414
disableToggleValue?: boolean;
1515

16-
/** Default color for slide toggles. */
16+
/**
17+
* Default theme color of the slide toggle. This API is supported in M2 themes only,
18+
* it has no effect in M3 themes.
19+
*
20+
* For information on applying color variants in M3, see
21+
* https://material.angular.io/guide/theming#using-component-color-variants.
22+
*/
1723
color?: ThemePalette;
1824

1925
/** Whether to hide the icon inside the slide toggle. */

src/material/slide-toggle/slide-toggle.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ specify an appropriate label.
1717
`<mat-slide-toggle>` is compatible with `@angular/forms` and supports both `FormsModule`
1818
and `ReactiveFormsModule`.
1919

20-
### Theming
21-
The color of a `<mat-slide-toggle>` can be changed by using the `color` property. By default,
22-
slide-toggles use the theme's accent color. This can be changed to `'primary'` or `'warn'`.
23-
2420
### Accessibility
2521

2622
`MatSlideToggle` uses an internal `<button role="switch">` to provide an accessible experience. This

0 commit comments

Comments
 (0)