The goal of "material addons" is to achieve a stylesheet similar to Clarity Addons for Angular Material.
The package can be found on npmjs.
The demo uses the material-addons stylesheet and shows some basic layouting and css usage. Source of the demo website is found in the src directory.
- v10.0.21: Added mad button components ( mad-primary-button, mad-outline-button, etc.) to ensure a unified design
- v10.0.19: Fixed #46 where read-only numbers were formatted by default
- v10.0.18: Fix card header size by using default Angular Material styling
- v10.0.17: Minor fixes in 4 components (numeric-field , action-table , quicklist , readonly-formfield)
- v10.0.16: Fix number format detection in numeric-field
- v10.0.15: Small fix in action-table
- v10.0.14: Add action-table bugfix in numeric-field
- v10.0.13: Event emitter fix in card component
- v10.0.12: Style fix in card component
- v10.0.11: Added quicklist and card component
- v10.0.10: Added numeric-field editable fields
- v10.0.9: (not released)
- v10.0.8: Added numeric-field directive
Material addons requires an already set-up Angular Material project. To do a fresh start please follow the official Angular Material guide before you continue, but exclude step 4 ("include a theme").
-
Install Material Addons package using npm:
npm install @porscheinformatik/material-addons --save -
Add the stylesheet at the top of your projects from the folder themes, for example:
@import '~@porscheinformatik/material-addons/themes/poa'; -
To use a component, you need to import the Module of the component in your app.module.ts or in any other module, which needs the component.
Please follow the Contribution guidelines.
Use npm config set registry https://registry.npmjs.org/ to set registry on the official npm registry.
Run the following commands in the correct order:
npm install
npm run build:mat-add
npm install --no-optional
npm install
ng serve
One-liner for command line:
npm install && npm run build:mat-add && npm install --no-optional && npm install && ng serve
Use npm run eslint in the root directory to run the linter over your code.
Eslint and prettier are used as precommit hooks to enable a consistency of code format and quality in this repository. I'd also recommend to add the prettier extension in your editor, so that you get early feedback on your code. I use VS Code with the Prettier Extension and the auto format on save.
Use npm run build:mat-add in the root directory to build the package to your local dist directory.
Use npm install --no-optional to remove old versions of the package in the demo.
Afterwards, use normal npm install to get the newest version of the package from the dist directory.
Use npm run publish:mat-add to publish a new version on npm. The script bumps the version, builds it and then publishs it to the npm registry.
Use npm run publish:demo to deploy a new version to github pages of the demno.