@3kles/kles-material-dynamicforms 21.8.2 → 22.0.1
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
CHANGED
|
@@ -10,6 +10,27 @@ Check out the [changelog](./CHANGELOG.md) to check all the latest changes.
|
|
|
10
10
|
|
|
11
11
|
## Models
|
|
12
12
|
|
|
13
|
+
### Advanced CSS Grid layout
|
|
14
|
+
|
|
15
|
+
Add `layout` to an individual root field to enable CSS Grid automatically.
|
|
16
|
+
`direction="grid"` remains available to force it when no field declares a layout.
|
|
17
|
+
The defaults are a 12-column grid, a 10px gap, `colSpan: 12`, and `rowSpan: 1`.
|
|
18
|
+
|
|
19
|
+
```typescript
|
|
20
|
+
const fields: KlesFormElement[] = [
|
|
21
|
+
{ name: 'firstname', component: KlesFormInputComponent, layout: { colSpan: 6, responsive: { xs: { colSpan: 12 } } } },
|
|
22
|
+
{ name: 'lastname', component: KlesFormInputComponent, layout: { colSpan: 6, responsive: { xs: { colSpan: 12 } } } },
|
|
23
|
+
{ name: 'email', component: KlesFormInputComponent, layout: { colSpan: 12 } },
|
|
24
|
+
];
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Configure the root with `[layout]="{ columns: 12, gap: '16px' }"`. Structural
|
|
28
|
+
`section` and `layoutGroup` elements can contain nested `fields` and establish
|
|
29
|
+
independent grids through `layoutConfig`; they do not create Angular form
|
|
30
|
+
controls. `layoutGroup` is deliberately distinct from the existing data-bearing
|
|
31
|
+
`EnumType.group`. The legacy `row`, `column`, `wrap`, and `EnumType.group` APIs
|
|
32
|
+
are unchanged.
|
|
33
|
+
|
|
13
34
|
|
|
14
35
|
### Directives
|
|
15
36
|
|