diff --git a/src/dev-app/slider/BUILD.bazel b/src/dev-app/slider/BUILD.bazel index 07cca109687a..c85f7bbf7387 100644 --- a/src/dev-app/slider/BUILD.bazel +++ b/src/dev-app/slider/BUILD.bazel @@ -10,8 +10,10 @@ ng_module( ":slider_demo_scss", ], deps = [ + "//src/material/button", "//src/material/button-toggle", "//src/material/checkbox", + "//src/material/dialog", "//src/material/slider", "//src/material/tabs", "@npm//@angular/forms", diff --git a/src/dev-app/slider/slider-demo.html b/src/dev-app/slider/slider-demo.html index 120e4df53c07..96369f760f49 100644 --- a/src/dev-app/slider/slider-demo.html +++ b/src/dev-app/slider/slider-demo.html @@ -180,4 +180,10 @@ + + +
+ +
+
diff --git a/src/dev-app/slider/slider-demo.scss b/src/dev-app/slider/slider-demo.scss index fcb87f1c6efa..3d35411de5d2 100644 --- a/src/dev-app/slider/slider-demo.scss +++ b/src/dev-app/slider/slider-demo.scss @@ -46,3 +46,11 @@ min-width: 300px; margin-top: 30px; } + +.demo-dialog-trigger-container { + padding: 25px 0; + text-align: center; +} +.demo-dialog-content { + overflow: visible; +} diff --git a/src/dev-app/slider/slider-demo.ts b/src/dev-app/slider/slider-demo.ts index ba70cbbde41f..1860463753ba 100644 --- a/src/dev-app/slider/slider-demo.ts +++ b/src/dev-app/slider/slider-demo.ts @@ -6,12 +6,20 @@ * found in the LICENSE file at https://angular.io/license */ -import {Component} from '@angular/core'; +import {Component, Inject} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatSliderModule} from '@angular/material/slider'; import {MatTabsModule} from '@angular/material/tabs'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatDialog, MatDialogModule, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import {MatButtonModule} from '@angular/material/button'; + +interface DialogData { + color: string; + discrete: boolean; + showTickMarks: boolean; +} @Component({ selector: 'slider-demo', @@ -19,8 +27,10 @@ import {MatCheckboxModule} from '@angular/material/checkbox'; standalone: true, imports: [ FormsModule, - MatCheckboxModule, + MatButtonModule, MatButtonToggleModule, + MatCheckboxModule, + MatDialogModule, MatSliderModule, MatTabsModule, ReactiveFormsModule, @@ -49,6 +59,8 @@ export class SliderDemo { control = new FormControl('0'); + constructor(public dialog: MatDialog) {} + updateValue(input: EventTarget | null): void { if (!input) { return; @@ -91,4 +103,35 @@ export class SliderDemo { } (input as HTMLInputElement).checked ? this.control.disable() : this.control.enable(); } + openDialog() { + this.dialog.open(SliderDialogDemo, { + data: { + color: this.colorModel, + discrete: this.discrete, + showTickMarks: this.showTickMarks, + }, + }); + } +} + +@Component({ + selector: 'slider-dialog-demo', + styleUrls: ['slider-demo.css'], + template: ` +

Slider in a dialog

+
+ + + + + + + +
+ `, + standalone: true, + imports: [MatDialogModule, MatSliderModule], +}) +export class SliderDialogDemo { + constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {} }