Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yagolopez/material-light
💡 Material Design UI components for Angular (versions 4+)
https://github.com/yagolopez/material-light
angular angular-2 angular-applications angular-apps angular-cli angular-components angular-directives angular-material angular2 design material material-design material-light
Last synced: about 1 month ago
JSON representation
💡 Material Design UI components for Angular (versions 4+)
- Host: GitHub
- URL: https://github.com/yagolopez/material-light
- Owner: YagoLopez
- License: mit
- Created: 2017-01-09T01:24:21.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-27T11:26:00.000Z (almost 7 years ago)
- Last Synced: 2024-10-11T08:40:17.930Z (about 1 month ago)
- Topics: angular, angular-2, angular-applications, angular-apps, angular-cli, angular-components, angular-directives, angular-material, angular2, design, material, material-design, material-light
- Language: CSS
- Homepage:
- Size: 12.3 MB
- Stars: 40
- Watchers: 6
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
Material Light
**Material Designt UI components for Angular (versions 4 +)**
Features:
- 100% Free forever.
- Fast
- Light
- Easy and fun to use
- Library of true componentes encapsulating Typescipt code, CSS and HTML as atomic units
- Easy and quick form validation
- Great performance on mobile apps.
- Responsive content adaptable to desktop and mobile
- Components available also as Angular Modules allowing Code-Splitting/Lazy-loading. This implies loading only the components needed at runtime
- Ready for Ahead of Time Compilation (AOT)
- Tested in main desktop/mobile browsers: Chrome (Android, IOS, desktop), FF, Edge, IE, Opera. (Browsers supported)
- No dependencies from other libraries like JQuery or Bootstrap.
- Note: Server Side Rendering not supported
## Objective
The main goal was to achieve minimalism and performance, not to encompass all posible kind of options or UI components (this is the philosophy of Material Design Light too). You can always add other components from other sources.
If you find this project useful and are going to use it, please **give a star in the repo** and credits to the author and to Material Design Lite from Google
Terms of use under MIT license.
## Author
Yago López:
- Website: https://yagolopez.github.io
- Email: yago.lopez ([at]) gmail.com
## Demo
- Mobile Simulator (For Desktop). Warning: Content in
external iframes may have javascript restrictions for security reasons (i. e. alert dialogs). Run the full screen
version for unrestricted features.
- Full Screen (For Mobile)
## Insallation and Use
- Using Node/Npm/Yarn, in a project generated with Angular-CLI, run: `npm install YagoLopez/material-light --save`
- Whitout Node/Npm: Clone or fork the repository
- Install dependencies with `npm install`
- IMPORTANT: Adjust the `basePath` in
mlDemoAppMod.ts to your environment
- Run: `ng serve` from project directory
## Notes
- This project can be used with the **angular-cli** although not mandatory.
- Material Icons must be included from `{project-folder}/src/assets/fonts/mlIcons.css` in your `index.html`
- To have AOT working you must execute the following steps:
- Copy `{project-folder}/node_modules/material-light/src/app/ml/` folder to your `/src/app` folder
- Copy `{project-folder}/node_modules/material-light/src/assets/` folder to your `/src/` folder
- Import the component modules from `{project-folder}/src/app/ml/components` in your own module. Component modules have `*Mod.ts` file name. For example, if you want to use `MlButton`, import `MlButtonMod.ts` in your module and place `my button` in your template
- Use the components following the examples in the `{project-folder}/node_modules/material-light/src/app/pages` directory.
- Use `` as base component to place inside it all other components
- This project does not work in full strict Typescript mode. (`strict` flag must be `false` in `tsconfig.json`)
## Theming
Basisc theming can be achieved using Angular special selectors in the root component:
```CSS
/* Header theme */
:host /deep/ ml-header {
background: cornflowerblue;
color: yellow;
}
/* Content theme */
:host /deep/ ml-content {
background: lightblue;
}
```
For advanced theming, CSS selectors must be used. Inspect the DOM using developer tools. For example:
```CSS
/* Button colored theme */
:host /deep/ ml-button.mdl-button--raised.mdl-button--colored {
background: brown;
}
/* Button accent theme */
:host /deep/ ml-button.mdl-button--raised.mdl-button--accent {
background: green;
}
```
## Running the demo
You can run the compiled demo pointing a web server to `{project-folder}/node_modules/material-light/dist/index.html`
If you want to compile the project:
- Clone or download the repo
- Inside the project folder run `npm install`
- Adjust the `basePath` in `mlDemoAppMod.ts` to your environment and run it with `ng serve`
## Testing
Tests with the colaboration of:
## Disclaimers:
- This project is based on Material Design Lite from Google. It is an adaptation of MDL JavaScript components to Angular components with the permission of the MDL team.
- Material Design is a Google's registered trade mark probably.
- This is an open-source project without commercial or profit intention.