@ng-prism/plugin-box-model 21.0.0 → 21.0.2
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 +49 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @ng-prism/plugin-box-model
|
|
2
|
+
|
|
3
|
+
CSS box model inspector plugin for [@ng-prism/core](https://github.com/dyingangel666/ng-prism). Overlays margin, padding, border, and content dimensions on the rendered component.
|
|
4
|
+
|
|
5
|
+
> **Full documentation:** [ng-prism Docs — Box Model Plugin](https://dyingangel666.github.io/ng-prism/#/plugins/box-model)
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @ng-prism/plugin-box-model
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer Dependencies
|
|
14
|
+
|
|
15
|
+
| Package | Version |
|
|
16
|
+
|---|---|
|
|
17
|
+
| `@ng-prism/core` | `>=21.0.0` |
|
|
18
|
+
| `@angular/core` | `>=20.0.0` |
|
|
19
|
+
|
|
20
|
+
## Setup
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
// ng-prism.config.ts
|
|
24
|
+
import { defineConfig } from '@ng-prism/core/config';
|
|
25
|
+
import { boxModelPlugin } from '@ng-prism/plugin-box-model';
|
|
26
|
+
|
|
27
|
+
export default defineConfig({
|
|
28
|
+
plugins: [boxModelPlugin()],
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## What It Does
|
|
33
|
+
|
|
34
|
+
- Adds a **Box Model** panel to the styleguide
|
|
35
|
+
- Shows an interactive overlay on the rendered component displaying:
|
|
36
|
+
- Content dimensions (width x height)
|
|
37
|
+
- Padding values (top, right, bottom, left)
|
|
38
|
+
- Border widths
|
|
39
|
+
- Margin values
|
|
40
|
+
- Updates live when inputs change via the Controls panel
|
|
41
|
+
- Color-coded layers (content, padding, border, margin)
|
|
42
|
+
|
|
43
|
+
## How It Works
|
|
44
|
+
|
|
45
|
+
The plugin registers a panel with an overlay component. The overlay reads the rendered element from `PrismRendererService.renderedElement` and uses `getComputedStyle()` to extract box model values. Values update reactively when the component re-renders.
|
|
46
|
+
|
|
47
|
+
## License
|
|
48
|
+
|
|
49
|
+
MIT
|