├── .gitignore ├── LICENSE ├── README.md ├── dist ├── app.js ├── index.html ├── polyfills.js ├── vendor-3thparty.js └── vendor-ng.js ├── package.json ├── public └── src │ ├── _all-theme.scss │ ├── prebuilt │ ├── deeppurple-amber.scss │ ├── indigo-pink.scss │ ├── pink-bluegrey.scss │ └── purple-green.scss │ └── styles.scss ├── src ├── app │ ├── app-demo │ │ ├── bottom-nav │ │ │ ├── demo-bottom-nav.html │ │ │ ├── demo-bottom-nav.scss │ │ │ └── demo-bottom-nav.ts │ │ ├── datatable │ │ │ ├── demo-datatable.html │ │ │ ├── demo-datatable.scss │ │ │ └── demo-datatable.ts │ │ ├── demo.home.ts │ │ ├── error-messages │ │ │ ├── demo-error-messages.html │ │ │ ├── demo-error-messages.scss │ │ │ └── demo-error-messages.ts │ │ └── fab-speed-dial │ │ │ ├── demo-fab-speed-dial.html │ │ │ ├── demo-fab-speed-dial.scss │ │ │ └── demo-fab-speed-dial.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── app.routes.ts │ └── shared │ │ ├── component │ │ ├── index.ts │ │ ├── smd-bottom-nav │ │ │ ├── _smd-bottom-nav-theme.scss │ │ │ ├── index.ts │ │ │ ├── smd-bottom-nav.component.html │ │ │ ├── smd-bottom-nav.component.scss │ │ │ └── smd-bottom-nav.component.ts │ │ ├── smd-datatable │ │ │ ├── README.md │ │ │ ├── _datatable-theme.scss │ │ │ ├── datatable.component.html │ │ │ ├── datatable.component.scss │ │ │ ├── datatable.component.ts │ │ │ └── index.ts │ │ ├── smd-error-messages │ │ │ ├── _smd-error-message-theme.scss │ │ │ ├── index.ts │ │ │ ├── smd-error-message.component.scss │ │ │ └── smd-error-message.component.ts │ │ ├── smd-fab-speed-dial │ │ │ ├── README.md │ │ │ ├── fab-speed-dial.scss │ │ │ ├── fab-speed-dial.ts │ │ │ └── index.ts │ │ └── smd-paginator │ │ │ ├── _paginator-theme.scss │ │ │ ├── index.ts │ │ │ ├── paginator.component.html │ │ │ ├── paginator.component.scss │ │ │ └── paginator.component.ts │ │ └── components.module.ts ├── index.html ├── main.ts ├── polyfills.ts ├── vendor-3thparty.ts └── vendor-angular.ts ├── tsconfig.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /.idea/* 3 | /target/ 4 | */target 5 | /target 6 | /bin 7 | 8 | *.settings 9 | *.classpath 10 | *.project 11 | */bin 12 | *rebel.xml 13 | *.iml 14 | .tern-project 15 | *.*~ 16 | node_modules 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Jeferson Estevo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple Material Design for Angular 2 | 3 | This is a simple project to design angular material components that are not yet implemented on the official angular material repository: 4 | 5 | [Material Design for Angular](https://github.com/angular/material2). 6 | 7 | ### Components 8 | 9 | | Component | Docs | 10 | |-----------------------|--------------| 11 | | Datatable | [README][1] | 12 | | FAB Speed Dial | [README][2] | 13 | 14 | [1]: https://github.com/jefersonestevo/angular-smd/blob/master/src/app/shared/component/smd-datatable/README.md 15 | [2]: https://github.com/jefersonestevo/angular-smd/blob/master/src/app/shared/component/smd-fab-speed-dial/README.md 16 | 17 | ### Demo App 18 | 19 | [Demo App](https://rawgit.com/jefersonestevo/angular-smd/master/dist/index.html) 20 | 21 | ### How to run the project 22 | `git clone https://github.com/jefersonestevo/angular-smd.git` 23 | 24 | `cd angular-smd` 25 | 26 | `npm install` 27 | 28 | `npm start` 29 | 30 | Then you can access [http://localhost:9000](http://localhost:9000) -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |62 | {{htmlExample}} 63 |64 |
69 | {{tsExample}} 70 |71 |
77 | {{htmlExample}} 78 |79 |
84 | {{tsExample}} 85 |86 |
66 | {{htmlExample}} 67 |68 |
73 | {{tsExample}} 74 |75 |
DataTable
36 |Fab Speed Dial
39 |Bottom Nav
42 |Error Messages
45 |
9 | |
13 | 17 | 21 | {{column.title}} 22 | 23 | | 24 |
---|---|
27 | |
31 | |
44 |
45 | |
52 | |
55 | 56 | Não existem itens 57 | 58 | | 59 |