@kubex/zinc 1.0.102 → 1.0.103
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/dist/custom-elements.json +33 -1
- package/dist/vscode.html-custom-data.json +21 -0
- package/dist/web-types.json +21 -1
- package/dist/zn.d.ts +2 -0
- package/dist/zn.min.js +37 -37
- package/docs/pages/components/sp.md +36 -0
- package/package.json +1 -1
- package/src/components/sp/sp.component.ts +2 -0
- package/src/components/sp/sp.scss +13 -0
|
@@ -66,6 +66,42 @@ Use the `no-gap` attribute to remove all spacing between children.
|
|
|
66
66
|
</zn-sp>
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
+
### Align
|
|
70
|
+
|
|
71
|
+
Use the `align` attribute to align children along the cross axis. Accepts `start`, `center`, `end`, `stretch`, or `baseline`. In a row layout the cross axis is vertical; in a column layout it is horizontal.
|
|
72
|
+
|
|
73
|
+
```html:preview
|
|
74
|
+
<zn-sp row align="start" style="height: 100px; border: 1px dashed #ccc;">
|
|
75
|
+
<div style="background: #d0e4ff; padding: 8px;">Short</div>
|
|
76
|
+
<div style="background: #d0e4ff; padding: 8px; height: 60px;">Tall</div>
|
|
77
|
+
<div style="background: #d0e4ff; padding: 8px;">Short</div>
|
|
78
|
+
</zn-sp>
|
|
79
|
+
<br />
|
|
80
|
+
<zn-sp row align="center" style="height: 100px; border: 1px dashed #ccc;">
|
|
81
|
+
<div style="background: #d0e4ff; padding: 8px;">Short</div>
|
|
82
|
+
<div style="background: #d0e4ff; padding: 8px; height: 60px;">Tall</div>
|
|
83
|
+
<div style="background: #d0e4ff; padding: 8px;">Short</div>
|
|
84
|
+
</zn-sp>
|
|
85
|
+
<br />
|
|
86
|
+
<zn-sp row align="end" style="height: 100px; border: 1px dashed #ccc;">
|
|
87
|
+
<div style="background: #d0e4ff; padding: 8px;">Short</div>
|
|
88
|
+
<div style="background: #d0e4ff; padding: 8px; height: 60px;">Tall</div>
|
|
89
|
+
<div style="background: #d0e4ff; padding: 8px;">Short</div>
|
|
90
|
+
</zn-sp>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Justify
|
|
94
|
+
|
|
95
|
+
Use the `justify` attribute to distribute children along the main axis. Accepts `start`, `center`, `end`, `between`, `around`, or `evenly`. In a row layout the main axis is horizontal; in a column layout it is vertical.
|
|
96
|
+
|
|
97
|
+
```html:preview
|
|
98
|
+
<zn-sp row justify="between" style="border: 1px dashed #ccc;">
|
|
99
|
+
<zn-chip>Left</zn-chip>
|
|
100
|
+
<zn-chip>Middle</zn-chip>
|
|
101
|
+
<zn-chip>Right</zn-chip>
|
|
102
|
+
</zn-sp>
|
|
103
|
+
```
|
|
104
|
+
|
|
69
105
|
### Flush
|
|
70
106
|
|
|
71
107
|
By default, `zn-sp` applies padding. Use the `flush` attribute to remove all padding, or `flush-x` / `flush-y` to remove padding in a single direction.
|
package/package.json
CHANGED
|
@@ -39,6 +39,8 @@ export default class ZnSp extends ZincElement {
|
|
|
39
39
|
@property({attribute: 'divide', type: Boolean, reflect: true}) divide: boolean = false;
|
|
40
40
|
@property({attribute: 'gap', reflect: true}) gap: keyof typeof defaultSizes;
|
|
41
41
|
@property({attribute: 'row', type: Boolean, reflect: true}) row: boolean = false;
|
|
42
|
+
@property({reflect: true}) align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
43
|
+
@property({reflect: true}) justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
42
44
|
@property({attribute: 'grow', type: Boolean, reflect: true}) grow: boolean = false;
|
|
43
45
|
@property({attribute: 'pad-x', type: Boolean, reflect: true}) padX: boolean = false;
|
|
44
46
|
@property({attribute: 'pad-y', type: Boolean, reflect: true}) padY: boolean = false;
|
|
@@ -107,3 +107,16 @@
|
|
|
107
107
|
padding-right: 0;
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
+
|
|
111
|
+
:host([align="start"]) .sp { align-items: flex-start; }
|
|
112
|
+
:host([align="center"]) .sp { align-items: center; }
|
|
113
|
+
:host([align="end"]) .sp { align-items: flex-end; }
|
|
114
|
+
:host([align="stretch"]) .sp { align-items: stretch; }
|
|
115
|
+
:host([align="baseline"]) .sp { align-items: baseline; }
|
|
116
|
+
|
|
117
|
+
:host([justify="start"]) .sp { justify-content: flex-start; }
|
|
118
|
+
:host([justify="center"]) .sp { justify-content: center; }
|
|
119
|
+
:host([justify="end"]) .sp { justify-content: flex-end; }
|
|
120
|
+
:host([justify="between"]) .sp { justify-content: space-between; }
|
|
121
|
+
:host([justify="around"]) .sp { justify-content: space-around; }
|
|
122
|
+
:host([justify="evenly"]) .sp { justify-content: space-evenly; }
|