1 |
|
2 | Angular 2 components, directives and styles based on material design lite https://getmdl.io (v: 1.2.1).
|
3 |
|
4 | This package assumes that you are building an Angular2 app with TypeScript. Angular CLI makes it even easier but isn't required.
|
5 |
|
6 | [Demo-App with all supported components and documentation](http://mseemann.io/angular2-mdl/)
|
7 |
|
8 | [![Build Status](https://travis-ci.org/mseemann/angular2-mdl.svg?branch=master)](https://travis-ci.org/mseemann/angular2-mdl)
|
9 | [![CircleCI](https://circleci.com/gh/mseemann/angular2-mdl/tree/master.svg?style=shield)](https://circleci.com/gh/mseemann/angular2-mdl/tree/master)
|
10 | [![npm version](https://badge.fury.io/js/angular2-mdl.svg)](http://badge.fury.io/js/angular2-mdl)
|
11 | [![Downloads](http://img.shields.io/npm/dm/angular2-mdl.svg)](https://npmjs.org/package/angular2-mdl)
|
12 | [![Coverage Status](https://coveralls.io/repos/github/mseemann/angular2-mdl/badge.svg?branch=master)](https://coveralls.io/github/mseemann/angular2-mdl?branch=master)
|
13 | [![Dependencies](https://david-dm.org/mseemann/angular2-mdl.svg)](https://david-dm.org/mseemann/angular2-mdl)
|
14 | [![peerDependencies Status](https://david-dm.org/mseemann/angular2-mdl/peer-status.svg)](https://david-dm.org/mseemann/angular2-mdl?type=peer)
|
15 | [![DevDependencies](https://david-dm.org/mseemann/angular2-mdl/dev-status.svg)](https://david-dm.org/mseemann/angular2-mdl#info=devDependencies&view=table)
|
16 | [![Code Climate](https://codeclimate.com/github/mseemann/angular2-mdl/badges/gpa.svg)](https://codeclimate.com/github/mseemann/angular2-mdl)
|
17 |
|
18 | **Please don't use github to ask questions. Use stackoverflow instead: http://stackoverflow.com/questions/tagged/angular2-mdl.**
|
19 |
|
20 | **Here is a plnkr if you'd like to play around http://plnkr.co/edit/I3dLfLUDIH2xlEJqj0da?p=preview.**
|
21 |
|
22 |
|
23 | ### Status of the npm package version 2 (mdl version 1.3.0; angular 2 final)
|
24 |
|
25 | - Badges
|
26 | - Buttons
|
27 | - Cards
|
28 | - Chips
|
29 | - Dialogs (imperative and declarative)
|
30 | - Icons
|
31 | - Loading
|
32 | - Shadow
|
33 | - Toggle (Checkbox, Radio, Icon Toggle, Switch)
|
34 | - Lists
|
35 | - Slider
|
36 | - Snackbar
|
37 | - Table
|
38 | - Tooltips
|
39 | - Menu
|
40 | - Layout (standard, scroll, waterfall, tabs)
|
41 | - Tabs
|
42 | - Textfields (multiline, expandable)
|
43 |
|
44 |
|
45 | ### Installation
|
46 |
|
47 | ```bash
|
48 | npm install angular2-mdl --save
|
49 | ```
|
50 |
|
51 |
|
52 | ### How to use the mdl components with webpack
|
53 |
|
54 | Just use it. Add the MdlModule to your NgModule imports and you are done!
|
55 |
|
56 | ### How to use the mdl components with system js
|
57 |
|
58 | You need to configure your `system-config.js` file:
|
59 |
|
60 | ```JavaScript
|
61 | const map: any = {
|
62 | 'angular2-mdl': 'vendor/angular2-mdl'
|
63 | };
|
64 |
|
65 | /** User packages configuration. */
|
66 | const packages: any = {
|
67 | 'angular2-mdl': { main: 'bundle/angular2-mdl.js'}
|
68 | };
|
69 | ```
|
70 |
|
71 |
|
72 | ### css from material-design-lite
|
73 | You may include the material-deisgn-lite css in your html and you're done!
|
74 | ```HTML
|
75 | <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" />
|
76 | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
77 | ```
|
78 | Under http://mseemann.io/angular2-mdl/theme you'll find a customizing tool to change the theme colors.
|
79 |
|
80 | ### How to use the scss files from material-design-lite
|
81 | This package includes the scss files from material-design-lite.
|
82 | With these files you are able to change the colors and other variables in your own scss files:
|
83 |
|
84 | ```scss
|
85 | @import "~angular2-mdl/scss/color-definitions";
|
86 |
|
87 | $color-primary: $palette-blue-500;
|
88 | $color-primary-dark: $palette-blue-700;
|
89 | $color-accent: $palette-amber-A200;
|
90 | $color-primary-contrast: $color-dark-contrast;
|
91 | $color-accent-contrast: $color-dark-contrast;
|
92 |
|
93 | @import '~angular2-mdl/scss/material-design-lite';
|
94 | ```
|
95 |
|
96 | To make this working you need to find out the way how you could tell your build system where the scss is located.
|
97 | For example with webpack you can use the special `~angular2-mdl` syntax or you can configure the includePaths:
|
98 |
|
99 | ```JavaScript
|
100 | sassLoader: {
|
101 | includePaths: [util.root('node_modules', 'angular2-mdl', 'scss')]
|
102 | }
|
103 | ```
|
104 |
|
105 | # Contributing
|
106 |
|
107 | Every contribution is welcome. Please checkout the [CONRIBUTION.md](https://github.com/mseemann/angular2-mdl/blob/master/CONTRIBUTION.md) file.
|