@arkitektum/altinn-studio-custom-components 15.0.0 → 15.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 +30 -0
- package/dist/main.js +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -126,6 +126,36 @@ yarn test
|
|
|
126
126
|
|
|
127
127
|
---
|
|
128
128
|
|
|
129
|
+
## 🛠️ DevTools Mode
|
|
130
|
+
|
|
131
|
+
DevTools mode adds inspection overlays to all custom components on the page, making it easier to debug and inspect component properties during development.
|
|
132
|
+
|
|
133
|
+
### Activating DevTools Mode
|
|
134
|
+
|
|
135
|
+
Append `?devtools=true` to the URL of your Altinn Studio app:
|
|
136
|
+
|
|
137
|
+
```text
|
|
138
|
+
http://local.altinn.cloud/[ORG NAME]/[APP NAME]/.../PdfLayout?devtools=true
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### What It Shows
|
|
142
|
+
|
|
143
|
+
Each custom component gets a small badge button in its top-right corner. Clicking it opens an inspection panel showing the component's tag name, `id`, and all non-empty properties.
|
|
144
|
+
|
|
145
|
+
Components are color-coded by category:
|
|
146
|
+
|
|
147
|
+
| Badge | Category | Description |
|
|
148
|
+
|-------|----------|----------------------------|
|
|
149
|
+
| **B** | Base | Base components (blue) |
|
|
150
|
+
| **D** | Data | Data components (green) |
|
|
151
|
+
| **L** | Layout | Layout components (purple) |
|
|
152
|
+
|
|
153
|
+
Components that are conditionally hidden are rendered as a visible placeholder (dashed border) with a **hidden** label instead of being invisible, so you can still inspect their properties.
|
|
154
|
+
|
|
155
|
+
Clicking anywhere outside a panel closes it.
|
|
156
|
+
|
|
157
|
+
---
|
|
158
|
+
|
|
129
159
|
## 🔗 Resources
|
|
130
160
|
|
|
131
161
|
- [Altinn Studio Documentation](https://docs.altinn.studio/)
|