diff --git a/guides/schematics.md b/guides/schematics.md index c8c351074768..0c080d051b6a 100644 --- a/guides/schematics.md +++ b/guides/schematics.md @@ -12,13 +12,13 @@ Using the command below will install Angular Material, the [Component Dev Kit](h and [Angular Animations](https://angular.dev/guide/animations) in your project. Then it will run the installation schematic. -``` +```bash ng add @angular/material ``` In case you just want to install the `@angular/cdk`, there are also schematics for the [Component Dev Kit](https://material.angular.dev/cdk) -``` +```bash ng add @angular/cdk ``` @@ -65,7 +65,7 @@ started with a Material Design form group consisting of: * Material Design radio controls * Material Design buttons -``` +```bash ng generate @angular/material:address-form ``` @@ -75,7 +75,7 @@ The `navigation` schematic will create a new component that includes a toolbar with the app name, and a responsive side nav based on Material breakpoints. -``` +```bash ng generate @angular/material:navigation ``` @@ -84,7 +84,7 @@ ng generate @angular/material:navigation The table schematic will create a component that renders an Angular Material `` which has been pre-configured with a datasource for sorting and pagination. -``` +```bash ng generate @angular/material:table ``` @@ -93,7 +93,7 @@ ng generate @angular/material:table The `dashboard` schematic will create a new component that contains a dynamic grid list of Material Design cards. -``` +```bash ng generate @angular/material:dashboard ``` @@ -102,7 +102,7 @@ ng generate @angular/material:dashboard The `tree` schematic can be used to quickly generate an Angular component that uses the Angular Material `` component to visualize a nested folder structure. -``` +```bash ng generate @angular/material:tree ``` @@ -111,7 +111,7 @@ ng generate @angular/material:tree The `drag-drop` schematic is provided by the `@angular/cdk` and can be used to generate a component that uses the CDK drag and drop directives. -``` +```bash ng generate @angular/cdk:drag-drop ``` @@ -121,7 +121,7 @@ The `theme-color` schematic will generate a file with Material 3 palettes from t that can be used in a theme file. It also generates high contrast color override mixins if specified. -``` +```bash ng generate @angular/material:theme-color ``` diff --git a/guides/theming.md b/guides/theming.md index 59d25f9e7bd0..6b70dca2deda 100644 --- a/guides/theming.md +++ b/guides/theming.md @@ -35,7 +35,7 @@ entire application. The `color-scheme` is explicitly set to `light dark` so that the end user's system preferences are used to determine whether the application appears in light or dark mode. -``` +```scss @use '@angular/material' as mat; html { @@ -51,7 +51,7 @@ html { You can use the following styles to apply the theme’s surface background and on-surface text colors as a default across your application: -``` +```scss body { background: var(--mat-sys-surface); color: var(--mat-sys-on-surface); @@ -105,7 +105,7 @@ tertiary color. The theme-type is set to `light` which means that only the light color values will be set for the application. The typography is set to Roboto with a standard density setting. -``` +```scss @use '@angular/material' as mat; html { @@ -150,7 +150,7 @@ and the Open Sans font family to brand text. It specifies that bold weight is 900, medium weight is 500, and regular weight is 300\. The color scheme uses the violet color palette with a standard density. -``` +```scss @use '@angular/material' as mat; html { @@ -182,7 +182,7 @@ The following example theme file has a density setting of \-2 which causes most components to include less whitespace in their layout. The color scheme uses the violet color palette and applies Roboto as the font-family. -``` +```scss @use '@angular/material' as mat; html { @@ -234,7 +234,7 @@ builds custom color palettes based on a single color input for the primary color, and optionally color inputs to further customize secondary, tertiary, and neutral palettes: -``` +```bash ng generate @angular/material:theme-color ``` @@ -244,7 +244,7 @@ You can use Google Fonts as one option to load fonts in your application. For example, the following code in an application’s `` loads the font family Roboto with the font weights 700, 500, and 400: -``` +```html @@ -268,7 +268,7 @@ You can define `color-scheme: light` or `color-scheme: dark` to explicitly define your application’s mode. To set the mode depending on the user’s system preferences, use `color-scheme: light-dark` as shown in the following example: -``` +```scss @use '@angular/material' as mat; html { @@ -286,7 +286,7 @@ that the mode depends on whether that class has been applied. In the following example, the application always displays the light mode theme unless the class “dark-mode” is added to the HTML body. -``` +```scss @use '@angular/material' as mat; html { @@ -322,7 +322,7 @@ different contexts. In this case, a cyan-based palette is applied to a container of information about deleting data, causing buttons and other components to have a unique and attention-grabbing style applied: -``` +```scss @use '@angular/material' as mat; html { @@ -356,7 +356,7 @@ The following example styles demonstrate a component using the color and typography variables to create an application-wide banner presenting important information to the user: -``` +```scss :host { background: var(--mat-sys-primary-container); color: var(--mat-sys-on-primary-container); @@ -389,7 +389,7 @@ the application. The following example applies a violet color palette for the application, but alters the `primary-container` token to a specific shade of blue. -``` +```scss @use '@angular/material' as mat; html { @@ -411,7 +411,7 @@ html { Alternatively, an optional override map can be provided in the `mat.theme` mixin to replace values applied by the mixin: -``` +```scss @use '@angular/material' as mat; html { @@ -439,7 +439,7 @@ The following example demonstrates the Card’s `overrides` API to change the background color to red, increase the corner border radius, and specify a larger title font size. -``` +```scss html { @include mat.card-overrides(( elevated-container-color: red,