# zmaterial
> A components developed based on the angular material. Containing customizable and templete.
Latest version **0.3.12** (published 2022-05-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install zmaterial
pnpm add zmaterial
yarn add zmaterial
bun add zmaterial
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.12 |
| Published | 2022-05-26 |
| First published | 2021-02-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ivan Antunes |
| Maintainers | ivanantunes |
| Keywords | angular, javascript, typescript, zmaterial, material, components, templates |
## Links
- npm: https://www.npmjs.com/package/zmaterial
- Repository: https://github.com/ivanantunes/zmaterial-app
- Issues: https://github.com/ivanantunes/zmaterial-app/issues
- npm.io page: https://npm.io/package/zmaterial
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^2.3.1
## Alternatives
- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads
## Recent versions
- 0.3.12 (latest) — 2022-05-26
- 0.3.11 — 2022-05-26
- 0.3.10 — 2022-03-12
- 0.3.9 — 2021-12-06
- 0.3.8 — 2021-12-06
- 0.3.7 — 2021-12-06
- 0.3.4 — 2021-11-09
- 0.3.3 — 2021-11-06
- 0.3.1 — 2021-11-06
- 0.3.0 — 2021-11-01
- 0.2.7 — 2021-10-25
- 0.2.5 — 2021-10-17
- 0.2.4 — 2021-10-01
- 0.2.3 — 2021-09-30
- 0.2.2 — 2021-08-20
- … 13 more at https://npm.io/package/zmaterial/versions
## README
# zMaterial
A lib developed based on [Angular Material]("https://material.angular.io/") using the [Angular CLI]("https://angular.io/") framework. Containing Customized Components and Templates.
---
## Summary
1. [Develop Mode](#develop-mode)
2. [Install Library in Projects](#install-library-in-projects)
3. [Components](#components)
---
## Develop Mode
This part shows the development of the library
### Clone Project
- SSH
```
git clone git@github.com:ivanantunes/zmaterial-app.git
```
- HTTP
```
git clone https://github.com/ivanantunes/zmaterial-app.git
```
### Run Development Mode
To perform the tests we need to build the library and start the app later.
- Library Build
````
npm run watch-mod
````
- Start App
````
npm start
````
---
## Install Library in Projects
- Command to Install the Library in **Angular** Projects
````
npm install --save zmaterial
````
---
## Components
Below is the list of components that are available to use
1. [zMenu](#zMenu)
2. [zForms](#zForms)
3. [zReport](#zReport)
### zMenu
```html
```
```typescript
imports: [
// zMaterial
ZModule.forRoot({
languageData: translate
}),
ZMenuModule,
],
```
### zForms
````html
````
````typescript
import { ZFormInputBase, ZFormInputText, ZFormProvider } from 'zmaterial';
export class MyComponent extends ZFormProvider {
constructor() { super(); }
getInputs(): Observable[]> {
return of([
new ZFormInputText({
label: 'Login',
key: 'login',
type: 'text',
required: true,
layout: {
cols: 100
}
}),
new ZFormInputText({
label: 'Password',
key: 'password',
type: 'password',
required: true,
layout: {
cols: 100
}
}),
]);
}
}
````
````typescript
imports: [
// zMaterial
ZModule.forRoot({
languageData: translate
}),
ZFormModule,
],
````
### zReport
```html
```
```typescript
export class MyComponent extends ZReportProvider implements OnInit {
public ELEMENT_DATA: PeriodicElement[] = [
{position: '1', name: 'Hydrogen', weight: '1.0079', symbol: 'H'},
{position: '2', name: 'Helium', weight: '4.0026', symbol: 'He'},
{position: '3', name: 'Lithium', weight: '6.941', symbol: 'Li'},
{position: '4', name: 'Beryllium', weight: '9.0122', symbol: 'Be'},
{position: '5', name: 'Boron', weight: '10.811', symbol: 'B'},
{position: '6', name: 'Carbon', weight: '12.0107', symbol: 'C'},
{position: '7', name: 'Nitrogen', weight: '14.0067', symbol: 'N'},
{position: '8', name: 'Oxygen', weight: '15.9994', symbol: 'O'},
{position: '9', name: 'Fluorine', weight: '18.9984', symbol: 'F'},
{position: '10', name: 'Neon', weight: '20.1797', symbol: 'Ne'}
];
constructor() { super(); }
ngOnInit(): void {
}
public getReportDefinition(): ZReportDefinition[] {
return [
{
key: 'position',
header: 'Position',
order: 1,
cell: (element: PeriodicElement) => {
return element.position ;
}
},
{
key: 'name',
header: 'Name',
order: 2,
cell: (element: PeriodicElement) => {
return element.name;
}
},
{
key: 'weight',
header: 'Weight',
order: 3,
cell: (element: PeriodicElement) => {
return element.weight;
}
},
{
key: 'symbol',
header: 'Symbol',
order: 4,
cell: (element: PeriodicElement) => {
return element.symbol;
}
}
];
}
public getReportConfig(): ZReportConfig {
return {
title: 'zMaterial',
image: {
image: 'assets/no-profile.jpeg',
type: 'JPEG'
},
reportTitle: 'Report Example',
filters: [
{title: 'My Filter', value: 'Value Filter'},
],
actions: {
pdf: true,
xlsx: true,
csv: true
}
};
}
public getReportData(): Observable {
return of(this.ELEMENT_DATA);
}
}
```
```typescript
imports: [
// zMaterial
ZModule.forRoot({
languageData: translate
}),
ZReportModule
],
```
---
_Source: https://npm.io/package/zmaterial · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._