@almoamendev/ngx-md3 0.0.9 → 0.0.10
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 +34 -48
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,63 +1,49 @@
|
|
|
1
|
-
#
|
|
1
|
+
# ngx-md3
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A standalone, signals-first Angular component library that follows the Material Design 3 spec closely — not a reskin of Material 2, and not a wrapper around Angular Material.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**Docs & live component gallery: https://almoamendev.github.io/ngx-md3/**
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Why ngx-md3
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
- **Material Design 3** — color, shape, elevation, and motion tokens taken straight from the MD3 spec.
|
|
10
|
+
- **Signals-first** — standalone components built on Angular Signals, with `model()` for real two-way bindings where they matter.
|
|
11
|
+
- **Accessible by default** — correct ARIA roles, states, and keyboard behavior are built into every component, not bolted on afterward.
|
|
12
|
+
- **Plays well with forms** — every input-like component works with Angular Reactive Forms out of the box.
|
|
13
|
+
- **Fully themeable** — swap the entire palette by overriding CSS custom properties, no rebuild required.
|
|
14
|
+
- **Tree-shakeable** — every component is a standalone import; pull in a button without dragging along the rest of the library.
|
|
12
15
|
|
|
13
|
-
|
|
16
|
+
## Install
|
|
14
17
|
|
|
15
18
|
```bash
|
|
16
|
-
|
|
19
|
+
npm install @almoamendev/ngx-md3
|
|
17
20
|
```
|
|
18
21
|
|
|
19
|
-
##
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
cd dist/ngx-md3
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
-
```bash
|
|
40
|
-
npm publish
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Running unit tests
|
|
44
|
-
|
|
45
|
-
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
-
|
|
47
|
-
```bash
|
|
48
|
-
ng test
|
|
22
|
+
## Quick start
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import { Component } from '@angular/core';
|
|
26
|
+
import { Button } from '@almoamendev/ngx-md3';
|
|
27
|
+
|
|
28
|
+
@Component({
|
|
29
|
+
selector: 'app-example',
|
|
30
|
+
imports: [Button],
|
|
31
|
+
template: `
|
|
32
|
+
<button md3-button button-type="filled">
|
|
33
|
+
Get started
|
|
34
|
+
</button>
|
|
35
|
+
`,
|
|
36
|
+
})
|
|
37
|
+
export class ExampleComponent {}
|
|
49
38
|
```
|
|
50
39
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
For end-to-end (e2e) testing, run:
|
|
40
|
+
Browse the full component catalogue, API references, and live playgrounds at **https://almoamendev.github.io/ngx-md3/**.
|
|
54
41
|
|
|
55
|
-
|
|
56
|
-
ng e2e
|
|
57
|
-
```
|
|
42
|
+
## Links
|
|
58
43
|
|
|
59
|
-
|
|
44
|
+
- Docs & component gallery: https://almoamendev.github.io/ngx-md3/
|
|
45
|
+
- Source & issues: https://github.com/almoamendev/ngx-md3
|
|
60
46
|
|
|
61
|
-
##
|
|
47
|
+
## License
|
|
62
48
|
|
|
63
|
-
|
|
49
|
+
MIT © Hussain Almomen — see [LICENSE](https://github.com/almoamendev/ngx-md3/blob/main/LICENSE).
|