Angular Material: Difference between revisions
Created page with "[https://material.angular.io/ Angular Material] contains components for angular which follow material design. ==Getting Started== # Install Angular Material #: <pre>ng add @a..." |
|||
| (3 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
#: <pre>ng add @angular/material</pre> | #: <pre>ng add @angular/material</pre> | ||
# Create a theme following [https://material.angular.io/guide/theming this guide]. | # Create a theme following [https://material.angular.io/guide/theming this guide]. | ||
==Components== | |||
See [https://material.angular.io/components/categories] for a list of components. | |||
To import a component, you use to add it to your <code>app.module.ts</code> file. | |||
{{ hidden | Example import | | |||
<syntaxhighlight lang="typescript"> | |||
import { MatSliderModule } from '@angular/material/slider'; | |||
@NgModule ({.... | |||
imports: [..., | |||
MatSliderModule, | |||
] | |||
}) | |||
</syntaxhighlight> | |||
}} | |||
==Themes== | ==Themes== | ||
| Line 138: | Line 155: | ||
} | } | ||
// mat-color($primary, 50); is the lightest color | |||
// mat-color($primary, 900); is the darkest color | |||
// mat-color($primary, lighter); defaults to 100 | |||
// mat-color($primary); defaults to 500 | |||
// mat-color($primary, darker); defaults to 700 | |||
// mat-color($primary, '500-contrast'); gets contrast colors for text | |||
</syntaxhighlight> | </syntaxhighlight> | ||