@ng-render/angular-material 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# @ng-render/angular-material
|
|
2
|
+
|
|
3
|
+
Angular Material component catalog for [`@ng-render/angular`](https://github.com/ng-render/ng-render) — 19 pre-built Material Design components for AI-generated UIs.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @ng-render/angular-material @ng-render/angular @json-render/core @angular/material @angular/cdk
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Requires Angular 21+ and `@ng-render/angular` ^0.1.0.
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import { provideNgRenderMaterial } from '@ng-render/angular-material';
|
|
17
|
+
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
|
18
|
+
|
|
19
|
+
export const appConfig = {
|
|
20
|
+
providers: [
|
|
21
|
+
provideNgRenderMaterial(),
|
|
22
|
+
provideAnimationsAsync(),
|
|
23
|
+
],
|
|
24
|
+
};
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Components (19)
|
|
28
|
+
|
|
29
|
+
### Base (drop-in replacements for default catalog)
|
|
30
|
+
|
|
31
|
+
| Component | Description |
|
|
32
|
+
|-----------|-------------|
|
|
33
|
+
| Card | Material card with title, subtitle, appearance |
|
|
34
|
+
| Button | Material button with variant, appearance, icon |
|
|
35
|
+
| Text | Text with Material typography classes |
|
|
36
|
+
| Metric | Outlined card for key-value metrics |
|
|
37
|
+
| Stack | Flex layout container |
|
|
38
|
+
| Input | Form field with matInput, appearance, hint |
|
|
39
|
+
| Checkbox | Material checkbox with color |
|
|
40
|
+
| Badge | Material chip used as colored badge |
|
|
41
|
+
| Divider | Material divider line |
|
|
42
|
+
|
|
43
|
+
### Extended (Material-specific)
|
|
44
|
+
|
|
45
|
+
| Component | Description |
|
|
46
|
+
|-----------|-------------|
|
|
47
|
+
| Select | Dropdown with options array |
|
|
48
|
+
| Slider | Numeric range slider |
|
|
49
|
+
| DatePicker | Date picker with form field |
|
|
50
|
+
| Tabs | Tab group with child panels |
|
|
51
|
+
| Toolbar | Toolbar container |
|
|
52
|
+
| Progress | Progress bar or spinner |
|
|
53
|
+
| Chip | Chip set with removable items |
|
|
54
|
+
| Toggle | Slide toggle |
|
|
55
|
+
| Radio | Radio group with options |
|
|
56
|
+
|
|
57
|
+
## Custom Options
|
|
58
|
+
|
|
59
|
+
Pass additional options to `provideNgRenderMaterial()`:
|
|
60
|
+
|
|
61
|
+
```typescript
|
|
62
|
+
provideNgRenderMaterial({
|
|
63
|
+
handlers: { submitForm: async (params) => { /* ... */ } },
|
|
64
|
+
navigate: (path) => router.navigate([path]),
|
|
65
|
+
fallback: MyFallbackComponent,
|
|
66
|
+
});
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Or use the registry directly:
|
|
70
|
+
|
|
71
|
+
```typescript
|
|
72
|
+
import { provideNgRender } from '@ng-render/angular';
|
|
73
|
+
import { materialRegistry } from '@ng-render/angular-material';
|
|
74
|
+
|
|
75
|
+
provideNgRender({ registry: materialRegistry });
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Credits
|
|
79
|
+
|
|
80
|
+
Built on [`@json-render/core`](https://json-render.dev) by [Vercel Labs](https://vercel.com).
|
|
81
|
+
Angular implementation by the ng-render community.
|
|
82
|
+
|
|
83
|
+
## License
|
|
84
|
+
|
|
85
|
+
[MIT](../../LICENSE)
|