UNPKG

angular-material-npfixed

Version:

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

material.angularjs.org

angular/material

76 lines (54 loc) • 2.63 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@ngdoc content @name Introduction and Terms @description Material Design is a visual language with specifications for innovative user experiences (UX) and user interface (UI) elements. Themes convey meaning through color, tones, and contrasts, similar to how Layouts convey meaning through keylines and alignments. Theme [**color palettes**](http://www.google.com/design/spec/style/color.html#color-ui-color-palette), alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows changing the color of your Angular Material application. If you need more custom styling (such as layout changes including padding, margins, etc) you will need to either write CSS rules with custom selectors, or build a custom version of the `angular-material.css` file using SASS and custom variables. > <b>Note:</b> The Material Theming system provides the <a ng-href="/api/service/$mdThemingProvider#setNonce"> `$mdThemingProvider.setNonce()`</a> method to meet the requirements of a CSP-policy enabled application. <img src="https://cloud.githubusercontent.com/assets/210413/4816236/bf7783dc-5edd-11e4-88ef-1f8b6e87e1d7.png" alt="color palette" style="max-width: 100%;"> ## Theming Approach Angular Material makes it easy to design an app which follows the Material style guide's suggested design patterns: > Limit your selection of colors by choosing three color hues from the primary palette and one accent color > from the secondary palette. The accent color may or may not need fallback options. This concept is central to how Angular Material approaches theming. ## Important Terms ### Hues / Shades A hue/shade is a single color within a palette. ### Palettes A palette is a collection of hues. By default, Angular Material ships with all palettes from the material design spec built in. Valid palettes include: - red - pink - purple - deep-purple - indigo - blue - light-blue - cyan - teal - green - light-green - lime - yellow - amber - orange - deep-orange - brown - grey - blue-grey ### Color Intentions A color intention is a mapping of a palette for a given intention within your application. Valid color intentions in Angular Material include: - *primary* - used to represent primary interface elements for a user - *accent* - used to represent secondary interface elements for a user - *warn* - used to represent interface elements that the user should be careful of ### Themes A theme is a configuration of palettes used for specific color intentions. A theme also specifies a background color palette to be used for the application.