Finely tunes performance, because every millisecond counts. Fully tested across +
Finely tuned performance, because every millisecond counts. Fully tested across modern browsers.
md-button is an HTML <button> or <a> tag enhanced with styling and animation to match the
-Material Design button spec.
Users should employ a button element (<button>) when clicking triggers some action in the current
-view without navigating. An anchor element (<a>) should be used when clicking navigates
-the user to another URL. Depending on which element is used, the component will either be an
-instance of MdButton or MdAnchor. Visually, the two are identical.
There are five types of buttons:
-md-buttonmd-raised-buttonmd-icon-buttonmd-fabmd-mini-fabEach is an attribute directive that you can add to a button or a tag. You can provide custom content to the button by inserting it
-between the tags, as you would with a normal button.
Example:
- -<button md-button>FLAT</button>
-<button md-raised-button>RAISED</button>
-<button md-icon-button>
- <md-icon class="md-24">favorite</md-icon>
-</button>
-<button md-fab>
- <md-icon class="md-24">add</md-icon>
-</button>
-<button md-mini-fab>
- <md-icon class="md-24">add</md-icon>
-</button>
-Output:
-
All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the color attribute.
-Simply pass in the palette name.
In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background.
-Example:
- -<button md-raised-button color="primary">PRIMARY</button>
-<button md-raised-button color="accent">ACCENT</button>
-<button md-raised-button color="warn">WARN</button>
-Output:
-
You can disable any button type through the native disabled property. You can add it directly, or bind it to a property on your
-component class by adding [disabled]="isDisabled" given that the isDisabled
-property exists.
<button md-button disabled>OFF</button>
-<button md-raised-button [disabled]="isDisabled">OFF</button>
-<button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>
-Output:
-
md-button is added to an existing button or a tag, it enjoys all the accessibility natively built into these elements.We will also be adding ink ripples to buttons in an upcoming milestone.
-Properties:
-| Name | -Type | -Description | -||
|---|---|---|---|---|
color |
-`"primary" | -"accent" | -"warn"` | -The color palette of the button | -
disabled |
-boolean | -Whether or not the button is disabled | -||
disableRipple |
-boolean | -Whether the ripple effect when the button is clicked should be disabled | -
Get started with Angular Material 2 using the Angular CLI.
+ npm install -g angular-cli
+ ng new my-project
+The new command creates a project with a build system for your Angular app.
+npm install --save @angular/material
+src/app/app.module.ts
+import { MaterialModule } from '@angular/material';
+// other imports
+@NgModule({
+ imports: [MaterialModule.forRoot()],
+ ...
+})
+export class PizzaPartyAppModule { }
+This is required to apply all of the core and theme styles to your application. You can either +use a pre-built theme, or define your own custom theme.
+:trident: See the theming guide for instructions.
+md-slide-toggle and md-slider:The slide-toggle and slider components have a dependency on HammerJS.
+Add HammerJS to your application via npm, a CDN +(such as the Google CDN), or served +directly from your app.
+npm install --save hammerjs
+npm install --save-dev @types/hammerjs
+Import HammerJS on your app's module.
+src/app/app.module.ts
+import 'hammerjs';
+Finally, you need to add hammerjs to the types section of your tsconfig.json file:
{
+ "compilerOptions": {
+ "types": [
+ "hammerjs"
+ ]
+ }
+}
+If your project is using SystemJS for module loading, you will need to add @angular/material
+to the SystemJS configuration:
System.config({
+ // existing configuration options
+ map: {
+ ...,
+ '@angular/material': 'npm:@angular/material/material.umd.js'
+ }
+});
+md-icon:index.html.md-icon supports any font icons or svg icons, so this is only one option for an icon source.src/index.html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+In order to style your own components with Angular Material's tooling, the component's styles must be defined with Sass.
+@mixin to automatically apply a theme@mixinThe advantage of using a @mixin function is that when you change your theme, every file that uses it will be updated automatically.
+Calling it with a different theme argument allow multiple themes within the app or component.
@mixinWe can better theming our custom components adding a @mixin function to its theme file and then calling this function to apply a theme.
All you need is to create a @mixin function in the custom-component-theme.scss
// Import all the tools needed to customize the theme and extract parts of it
+@import '~@angular/material/core/theming/all-theme';
+
+// Define a mixin that accepts a theme and outputs the color styles for the component.
+@mixin candy-carousel-theme($theme) {
+ // Extract whichever individual palettes you need from the theme.
+ $primary: map-get($theme, primary);
+ $accent: map-get($theme, accent);
+
+ // Use md-color to extract individual colors from a palette as necessary.
+ .candy-carousel {
+ background-color: md-color($primary);
+ border-color: md-color($accent, A400);
+ }
+}
+Now you just have to call the @mixin function to apply the theme:
// Import a pre-built theme
+@import '~@angular/material/core/theming/prebuilt/deeppurple-amber';
+// Import your custom input theme file so you can call the custom-input-theme function
+@import 'app/candy-carousel/candy-carousel-theme.scss';
+
+// Using the $theme variable from the pre-built theme you can call the theming function
+@include candy-carousel-theme($theme);
+For more details about the theming functions, see the comments in the +source.
+@mixinWhen using @mixin, the theme file should only contain the definitions that are affected by the passed-in theme.
All styles that are not affected by the theme should be placed in a candy-carousel.scss file. This file should contain everything that is not affected by the theme like sizes, transitions...
Styles that are affected by the theme should be placed in a separated theming file as _candy-carousel-theme.scss and the file should have a _ before the name. This file should contain the @mixin function responsible for applying the theme to the component.
You can consume the theming functions from the @angular/material/core/theming/theming and Material palette vars from @angular/material/core/theming/palette. You can use the md-color function to extract a specific color from a palette. For example:
// Import theming functions
+@import '~@angular/material/core/theming/theming';
+// Import your custom theme
+@import 'src/unicorn-app-theme.scss';
+
+// Use md-color to extract individual colors from a palette as necessary.
+.candy-carousel {
+ background-color: md-color($candy-app-primary);
+ border-color: md-color($candy-app-accent, A400);
+}
+A theme is the set of colors that will be applied to the Angular Material components. The +library's approach to theming is based on the guidance from the Material Design spec.
+In Angular Material, a theme is created by composing multiple palettes. In particular, +a theme consists of:
+In Angular Material 2, all theme styles are generated statically at build-time so that your +app doesn't have to spend cycles generating theme styles on startup.
+Angular Material comes prepackaged with several pre-built theme css files. These theme files also +include all of the styles for core (styles common to all components), so you only have to include a +single css file for Angular Material in your app.
+You can include a theme file directly into your application from
+@angular/material/core/theming/prebuilt
If you're using Angular CLI, this is as simple as including one line
+in your style.css file:
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
+Alternatively, you can just reference the file directly. This would look something like
+<link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
+The actual path will depend on your server setup.
+You can also concatenate the file with the rest of your application's css.
+When you want more customization than a pre-built theme offers, you can create your own theme file.
+A theme file is a simple Sass file that defines your palettes and passes them to mixins that output +the corresponding styles. A typical theme file will look something like this:
+@import '~@angular/material/core/theming/all-theme';
+// Plus imports for other components in your app.
+
+// Include the base styles for Angular Material core. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+@include md-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue.
+$candy-app-primary: md-palette($md-indigo);
+$candy-app-accent: md-palette($md-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
+$candy-app-warn: md-palette($md-red);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($candy-app-theme);
+You only need this single Sass file; you do not need to use Sass to style the rest of your app.
+If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to
+add a new entry to the "styles" list in angular-cli.json pointing to the theme
+file (e.g., unicorn-app-theme.scss).
If you're not using the Angular CLI, you can use any existing Sass tooling to build the file (such
+as gulp-sass or grunt-sass). The simplest approach is to use the node-sass CLI; you simply run:
node-sass src/unicorn-app-theme.scss dist/unicorn-app-theme.css
+and then include the output file in your application.
+The theme file can be concatenated and minified with the rest of the application's css.
+You can extend the example above to define a second (or third or fourth) theme that is gated by +some selector. For example, we could append the following to the example above to define a +secondary dark theme:
+.unicorn-dark-theme {
+ $dark-primary: md-palette($md-blue-grey);
+ $dark-accent: md-palette($md-amber, A200, A100, A400);
+ $dark-warn: md-palette($md-deep-orange);
+
+ $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
+
+ @include angular-material-theme($dark-theme);
+}
+With this, any element inside of a parent with the unicorn-dark-theme class will use this
+dark theme.
For more details about theming your own components, see theming-your-components.md
+Blah
diff --git a/src/assets/example/button-demo.html b/src/assets/example/button-demo.html deleted file mode 100644 index 5fb68da3d..000000000 --- a/src/assets/example/button-demo.html +++ /dev/null @@ -1,104 +0,0 @@ - diff --git a/src/assets/example/button-demo.scss b/src/assets/example/button-demo.scss deleted file mode 100644 index fd50dbf1b..000000000 --- a/src/assets/example/button-demo.scss +++ /dev/null @@ -1,17 +0,0 @@ -.demo-button { - button, a { - margin: 8px; - text-transform: uppercase; - } - - section { - display: flex; - align-items: center; - background-color: #f7f7f7; - margin: 8px; - } - - p { - padding:5px 15px; - } -} diff --git a/src/assets/example/button-demo.ts b/src/assets/example/button-demo.ts deleted file mode 100644 index 376186f84..000000000 --- a/src/assets/example/button-demo.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {Component} from '@angular/core'; - - -@Component({ - selector: 'button-demo', - templateUrl: 'button-demo.html', - styleUrls: ['button-demo.css'], -}) -export class ButtonDemo { - isDisabled: boolean = false; - clickCounter: number = 0; -} diff --git a/src/main.scss b/src/main.scss index d56dae330..270514b71 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,9 +1,11 @@ @import '~@angular/material/core/theming/all-theme'; @import './app-theme'; +@import './styles/typography'; // Include material core styles. @include md-core(); +@include docs-site-typography(); // Define the light theme. @@ -14,17 +16,6 @@ $theme: md-light-theme($primary, $accent); @include angular-material-theme($theme); @include material-docs-app-theme($theme); -// Define the dark theme. -.docs-dark-theme { - $dark-primary: md-palette($md-cyan, 900, 700, 800); - $dark-accent: md-palette($md-amber, A400, A200, A700); - $dark-warn: md-palette($md-deep-orange); - - $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn); - @include angular-material-theme($dark-theme); - @include material-docs-app-theme($dark-theme); -} - body { font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; margin: 0; @@ -37,3 +28,14 @@ body { h1, h2 { weight: 400; } + +.docs-primary-header { + padding-left: 20px; + + h1 { + font-size: 30px; + font-weight: 300; + margin: 0; + padding: 50px; + } +} diff --git a/src/styles/_typography-theme.scss b/src/styles/_typography-theme.scss new file mode 100644 index 000000000..c5979df05 --- /dev/null +++ b/src/styles/_typography-theme.scss @@ -0,0 +1,43 @@ +@import '~@angular/material/core/theming/theming'; + +@mixin docs-site-typography-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + .docs-component-viewer-tabbed-content, + .docs-guide-content { + h1 { + color: md-color($primary, 800); + background: rgba(md-color($foreground, secondary-text), .03); + } + + h3, h2, h4, h5, p, ol, li{ + color: md-color($foreground, secondary-text); + } + + a { + color: md-color($primary); + } + + table { + box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12); + } + + table tbody th{ + border: 1px solid rgba(md-color($foreground, secondary-text), .03); + } + + td { + color: md-color($foreground, secondary-text); + border: 1px solid rgba(md-color($foreground, secondary-text), .03); + } + + th { + color: md-color($foreground, secondary-text); + background: rgba(md-color($foreground, secondary-text), .03); + } + } +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss new file mode 100644 index 000000000..4261cac2e --- /dev/null +++ b/src/styles/_typography.scss @@ -0,0 +1,69 @@ +@mixin docs-site-typography() { + .docs-component-viewer-tabbed-content .docs-component-view-text-content, + .docs-guide-content { + h1 { + display:inline-block; + font-size: 20px; + font-weight: 400; + padding: 5px; + } + + h3, h2 { + font-size: 20px; + font-weight: 400; + margin-bottom: 30px; + margin-top: 80px; + } + + h4 { + margin-top: 40px; + } + + h5 { + font-size: 16px; + } + + .md-tab-body-wrapper h2 { + margin-top: 0px; + } + + p { + font-size: 16px; + line-height: 28px; + } + + a { + text-decoration: none; + } + + table { + border-collapse: collapse; + border-radius: 2px; + border-spacing: 0; + margin: 0 0 32px 0; + width: 100%; + } + + table tbody th { + max-width: 100px; + padding: 13px 32px; + text-align: left; + } + + td { + font-weight: 400; + padding: 8px 30px; + + p { + margin: 0; + } + } + + th { + font-size: 16px; + font-weight: 400; + padding: 13px 32px; + text-align: left; + } + } +}