💡 Material Design UI components for Angular (versions 4+)
Material Light
**Material Designt UI components for Angular (versions 4 +)**
Features:
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.
Yago López:
npm install YagoLopez/material-light --save
npm install
basePath
in
mlDemoAppMod.ts to your environmentng serve
from project directory{project-folder}/src/assets/fonts/mlIcons.css
in your index.html
{project-folder}/node_modules/material-light/src/app/ml/
folder to your /src/app
folder{project-folder}/node_modules/material-light/src/assets/
folder to your /src/
folder{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 <ml-button>my button</ml-button>
in your template{project-folder}/node_modules/material-light/src/app/pages
directory.<ml-layout>
as base component to place inside it all other componentsstrict
flag must be false
in tsconfig.json
)Basisc theming can be achieved using Angular special selectors in the root component:
<style>
/* Header theme */
:host /deep/ ml-header {
background: cornflowerblue;
color: yellow;
}
/* Content theme */
:host /deep/ ml-content {
background: lightblue;
}
</style>
For advanced theming, CSS selectors must be used. Inspect the DOM using developer tools. For example:
<style>
/* 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;
}
</style>
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:
npm install
basePath
in mlDemoAppMod.ts
to your environment and run it with ng serve