gd-bs 6.5.4 → 6.5.5
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/build/components/cardGroup/index.js +28 -3
- package/dist/gd-bs-icons.js +1 -1
- package/dist/gd-bs-icons.min.js +1 -1
- package/dist/gd-bs.d.ts +1 -0
- package/dist/gd-bs.js +1 -1
- package/dist/gd-bs.min.js +1 -1
- package/index.html +87 -0
- package/package.json +1 -1
- package/src/components/button/index.ts +0 -2
- package/src/components/cardGroup/index.ts +33 -3
- package/src/components/cardGroup/types.d.ts +1 -0
package/index.html
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
<div id="panel"></div>
|
|
24
24
|
<div id="badge"></div>
|
|
25
25
|
<div id="card"></div>
|
|
26
|
+
<div id="card-group"></div>
|
|
26
27
|
<div id="tooltip"></div>
|
|
27
28
|
<div id="toolbar"></div>
|
|
28
29
|
<div id="ddl"></div>
|
|
@@ -165,6 +166,92 @@
|
|
|
165
166
|
}]
|
|
166
167
|
});
|
|
167
168
|
|
|
169
|
+
window["cardGroup"] = GD.Components.CardGroup({
|
|
170
|
+
el: document.getElementById("card-group"),
|
|
171
|
+
className: "g-4",
|
|
172
|
+
col: 4,
|
|
173
|
+
cards: [
|
|
174
|
+
{
|
|
175
|
+
body: [{
|
|
176
|
+
title: "Card Title 1",
|
|
177
|
+
text: "This is the card contents.",
|
|
178
|
+
actions: [{
|
|
179
|
+
text: "Card Action",
|
|
180
|
+
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
181
|
+
onClick: function(action, card) {
|
|
182
|
+
alert(card.title + " was clicked.");
|
|
183
|
+
}
|
|
184
|
+
}]
|
|
185
|
+
}]
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
body: [{
|
|
189
|
+
title: "Card Title 2",
|
|
190
|
+
text: "This is the card contents.",
|
|
191
|
+
actions: [{
|
|
192
|
+
text: "Card Action",
|
|
193
|
+
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
194
|
+
onClick: function(action, card) {
|
|
195
|
+
alert(card.title + " was clicked.");
|
|
196
|
+
}
|
|
197
|
+
}]
|
|
198
|
+
}]
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
body: [{
|
|
202
|
+
title: "Card Title 3",
|
|
203
|
+
text: "This is the card contents.",
|
|
204
|
+
actions: [{
|
|
205
|
+
text: "Card Action",
|
|
206
|
+
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
207
|
+
onClick: function(action, card) {
|
|
208
|
+
alert(card.title + " was clicked.");
|
|
209
|
+
}
|
|
210
|
+
}]
|
|
211
|
+
}]
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
body: [{
|
|
215
|
+
title: "Card Title 4",
|
|
216
|
+
text: "This is the card contents.",
|
|
217
|
+
actions: [{
|
|
218
|
+
text: "Card Action",
|
|
219
|
+
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
220
|
+
onClick: function(action, card) {
|
|
221
|
+
alert(card.title + " was clicked.");
|
|
222
|
+
}
|
|
223
|
+
}]
|
|
224
|
+
}]
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
body: [{
|
|
228
|
+
title: "Card Title 5",
|
|
229
|
+
text: "This is the card contents.",
|
|
230
|
+
actions: [{
|
|
231
|
+
text: "Card Action",
|
|
232
|
+
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
233
|
+
onClick: function(action, card) {
|
|
234
|
+
alert(card.title + " was clicked.");
|
|
235
|
+
}
|
|
236
|
+
}]
|
|
237
|
+
}]
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
body: [{
|
|
241
|
+
title: "Card Title 6",
|
|
242
|
+
text: "This is the card contents.",
|
|
243
|
+
actions: [{
|
|
244
|
+
text: "Card Action",
|
|
245
|
+
buttonType: GD.Components.ButtonTypes.OutlinePrimary,
|
|
246
|
+
onClick: function(action, card) {
|
|
247
|
+
alert(card.title + " was clicked.");
|
|
248
|
+
}
|
|
249
|
+
}]
|
|
250
|
+
}]
|
|
251
|
+
}
|
|
252
|
+
]
|
|
253
|
+
});
|
|
254
|
+
|
|
168
255
|
window["cbg"] = GD.Components.CheckboxGroup({
|
|
169
256
|
el: document.getElementById("cbGroup"),
|
|
170
257
|
label: "Label",
|
package/package.json
CHANGED
|
@@ -21,11 +21,41 @@ class _CardGroup extends Base<ICardGroupProps> implements ICardGroup {
|
|
|
21
21
|
|
|
22
22
|
// Configure the card group
|
|
23
23
|
private configure(cardTemplate: string) {
|
|
24
|
-
// Parse the cards
|
|
25
24
|
let cards = this.props.cards || [];
|
|
25
|
+
let isGrid = false;
|
|
26
|
+
|
|
27
|
+
// See if we are rendering columns
|
|
28
|
+
if (typeof (this.props.colSize) === "number") {
|
|
29
|
+
// Update the flag
|
|
30
|
+
isGrid = true;
|
|
31
|
+
|
|
32
|
+
// Update the class name
|
|
33
|
+
(this.el as HTMLElement).classList.remove("card-group");
|
|
34
|
+
(this.el as HTMLElement).classList.add("row");
|
|
35
|
+
|
|
36
|
+
// Determine the column class to use
|
|
37
|
+
let colSize = this.props.colSize > 0 && this.props.colSize <= 12 ? this.props.colSize : 4;
|
|
38
|
+
(this.el as HTMLElement).classList.add("row-cols-" + colSize);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Parse the cards
|
|
26
42
|
for (let i = 0; i < cards.length; i++) {
|
|
27
|
-
//
|
|
28
|
-
|
|
43
|
+
// Create the card
|
|
44
|
+
let card = Card(cards[i], cardTemplate);
|
|
45
|
+
|
|
46
|
+
// See if we are using a grid
|
|
47
|
+
if (isGrid) {
|
|
48
|
+
// Create a column element
|
|
49
|
+
let elCol = document.createElement("div");
|
|
50
|
+
elCol.classList.add("col");
|
|
51
|
+
elCol.appendChild(card.el);
|
|
52
|
+
|
|
53
|
+
// Add the card
|
|
54
|
+
this.el.appendChild(elCol);
|
|
55
|
+
} else {
|
|
56
|
+
// Add the card
|
|
57
|
+
this.el.appendChild(card.el);
|
|
58
|
+
}
|
|
29
59
|
}
|
|
30
60
|
}
|
|
31
61
|
}
|