Skip to content

Commit

Permalink
fix(material-experimental/mdc-slider): expose theming mixins (#22764)
Browse files Browse the repository at this point in the history
* Fixes that the MDC slider wasn't exposing its theming mixins publicly.
* Updates the docs for the MDC button to the new theming API.
  • Loading branch information
crisbeto committed May 25, 2021
1 parent 2dc9949 commit 0de3f72
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 17 deletions.
2 changes: 2 additions & 0 deletions src/material-experimental/_index.scss
Expand Up @@ -60,6 +60,8 @@
mdc-select-density, mdc-select-theme;
@forward './mdc-slide-toggle/slide-toggle-theme' as mdc-slide-toggle-* show mdc-slide-toggle-color,
mdc-slide-toggle-typography, mdc-slide-toggle-density, mdc-slide-toggle-theme;
@forward './mdc-slider/slider-theme' as mdc-slider-* show mdc-slider-color,
mdc-slider-typography, mdc-slider-density, mdc-slider-theme;
@forward './mdc-snack-bar/snack-bar-theme' as mdc-snack-bar-* show mdc-snack-bar-color,
mdc-snack-bar-typography, mdc-snack-bar-density, mdc-snack-bar-theme;
@forward './mdc-table/table-theme' as mdc-table-* show mdc-table-color, mdc-table-typography,
Expand Down
33 changes: 16 additions & 17 deletions src/material-experimental/mdc-button/README.md
Expand Up @@ -3,7 +3,7 @@ This is a prototype of an alternate version of `MatButton` built on top of
experimental and should not be used in production.

## How to use
Assuming your application is already up and running using Angular Material, you can add this
Assuming your application is already up and running using Angular Material, you can add this
component by following these steps:

1. Install `@angular/material-experimental` and MDC Web:
Expand Down Expand Up @@ -41,41 +41,40 @@ component by following these steps:
```

4. Use the buttons in your component's template:
```html

```html
<button mat-button> Basic </button>
<button mat-raised-button> Raised </button>
<button mat-stroked-button> Stroked </button>
<button mat-flat-button> Flat </button>
<button mat-flat-button> Flat </button>
<button mat-icon-button>
<mat-icon>save</mat-icon>
</button>
<button mat-fab>
<mat-icon>add</mat-icon>
</button>
```
5. Add the theme and typography mixins to your Sass. Note that there are three separate mixins for
the button variants: standard buttons, icon buttons, and floating action buttons. Include only the mixins of the
```

5. Add the theme and typography mixins to your Sass. Note that there are three separate mixins for
the button variants: standard buttons, icon buttons, and floating action buttons. Include only the mixins of the
button variants you are using:

```scss
@import '~@angular/material/theming';
@import '~@angular/material-experimental/mdc-button/button-theme';
@use '~@angular/material' as mat;
@use '~@angular/material-experimental' as mat-experimental;

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
$candy-app-theme: mat-light-theme((
$candy-app-primary: mat.define-palette(mat.$indigo-palette);
$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$candy-app-theme: mat.define-light-theme((
color: (
primary: $candy-app-primary,
accent: $candy-app-accent,
)
));


@include mat-mdc-button-theme($candy-app-theme);
@include mat-mdc-fab-theme($candy-app-theme);
@include mat-mdc-icon-button-theme($candy-app-theme);
@include mat-experimental.mdc-button-theme($candy-app-theme);
@include mat-experimental.mdc-fab-theme($candy-app-theme);
@include mat-experimental.mdc-icon-button-theme($candy-app-theme);
```

## API differences
Expand Down

0 comments on commit 0de3f72

Please sign in to comment.