Cheatography
https://cheatography.com
Angular 2 Material Design
This is a draft cheat sheet. It is a work in progress and is not finished yet.
Available Componentsbutton | cards | checkbox | sidenav | radio | toolbar | input | list | slide-toggle | icon | button-toggle | progress-circle | slider | progress-bar | tabs |
Custom Theming SetupCreate palette.scss in /src
palette.scss:
@import '~@angular/material/src/lib/core/theming/all-theme';
@include md-core();
$YourApp-app-primary: md-palette(PimaryColor);
$YourApp-app-accent: md-palette(AccentColor);
$YourApp-app-warn: md-palette(WarnColor);
$YourApp-app-theme: md-light-theme($YourApp-app-primary, $YourApp-app-accent, $YourApp-app-warn);
Add palette.scss to the styles array in angular-cli.json
angular-cli.json:
{
...,
"apps": [
...,
"styles": [
...,
palette.scss,
...
].
],
...
} |
A word in italics must be replaced with relevant info specific to your setup.
| | SetupCMD
npm install --save @angular/material
src/app/app.module.ts
import { MaterialModule } from '@angular/material';
...
@NgModule({
imports: [MaterialModule.forRoot()],
...
}) |
Utilizing Custom Theme within Component YourComponent.component.css
@import '~@angular/material/src/lib/core/theming/theming';
@import 'src/palette.scss';
// Use md-color to extract individual colors from a palette as necessary.
.YourClass {
background-color: md-color($YourApp-app-primary);
border-color: md-color($YourApp-app-accent);
} |
Button Toggle<md-button-toggle> | Properties: | Name | Type | Description | [id] | string | Id of the toggle | [name] | string (optional) | used to differentiate between different toggle groups | [checked] | Boolean (optional) | Whether or not the toggle is checked | [disabled] | Boolean (optional) | Whether or not the toggle is disabled | Events: | | | Name | | Description | (change) | | Emitted when checked value is changed | <md-button-toggle-group> | Properties: | Name | Type | Description | name | string (optional) | Name of group | disabled | boolean(optional) | default is false | value | any | Set to the value(s) of the selected toggle(s) | selected | mdButtonToggle | Currently selected toggle(s) | Multiple | Boolean(optional) | default is false, whether or not group allows multiple selection | Events: | | | Name | | Description | (change) | | Emitted when value of group changes |
Basic usage
<md-button-toggle>Toggle Me </md-button-toggle>
Group
<md-button-toggle-group>
<md-button-toggle> Option One </md-button-toggle>
<md-button-toggle> Option Two </md-button-toggle>
</md-button-toggle-group>
Base Component Cheat Sheet<md-> | Properties: | Name | Type | Description | | | | Events: | | | Name | | Description | | | |
|
Help Us Go Positive!
We offset our carbon usage with Ecologi. Click the link below to help us!