Card

0_14 pre0_13 pre0_12 pre0_11 pre0_10 pre0_09 pre

Mit dem Card-Modul präsentierst du komplexe Datenbank-Informationen in einem strukturierten und ansprechenden Format, das die Lesbarkeit und Übersichtlichkeit maximiert. Es ist Teil unseres Essential UI Bundles, das vier Module für eine optimale Darstellung deiner Inhalte bietet: Layout, Interaction, Badge und Card. Während sich die Module unseres Bundles den gleichen optimierten JS-Code teilen und dadurch eine hohe Performance und Flexibilität bieten, ermöglichen sie dir durch ihr unterschiedliches Grunddesign eine schnellere Umsetzung passender Darstellungen.

Funktion und Aussehen

Das Card-Modul ermöglicht es dir, verschiedene Arten von Inhalten – wie Text, Bilder, Links oder Buttons – in einer visuell abgegrenzten "Karte" zusammenzufassen. Dies ist besonders nützlich für die Darstellung von Produktinformationen, Nutzerprofilen, Artikeln oder Blogeinträgen. Du kannst das Layout der Karten flexibel anpassen, um die wichtigsten Informationen optimal hervorzuheben. Die Gestaltung deiner Cards nimmst du über den Style-Key oder den Class-Key vor. Nutze den Class-Key, um deine eigenen globalen Classes zu referenzieren.

Nutzer-Interaktion

Auch Cards lassen sich umfassend interaktiv gestalten. Du kannst jeder Card und den darin enthaltenen Elementen eine beliebige Anzahl an Actions zuweisen. Jede Action besteht aus einem auslösenden Trigger und einem Array von Scripts, die bei Auslösen des Triggers ausgeführt werden. Als Trigger können Klick, Mausbewegung und alle weiteren HTML Mouse Events eingesetzt werden. Je nach Anwendung können auch andere HTML Events funktionieren. Eine Liste solcher Events findest du beispielsweise hier. Weitere Infos zu Actions findest du in diesem Teil unserer Doku.

Modulcode

Basis

GIP_card({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   direction: "horizontal",
   blocks: [{
   	value: *any*,
   }],
})

Medium

GIP_card({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   direction: "horizontal",
   style: "",
   blocks: [{
   	style: "",
   	value: *any*,
   }],
})

Fortgeschritten

GIP_card({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   direction: "horizontal",
   class: "",
   style: "",
   blocks: [{
   	class: "",
   	style: "",
   	value: *any*,
   	actions: [{
   		trigger: "click",
   		scripts: [{
   			type: "",
   		}],
   	}],
   }],
   actions: [{
   	trigger: "click",
   	scripts: [{
   		type: "",
   	}],
   }],
})

Vollständig

GIP_card({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   direction: "",
   class: "",
   style: "",
   blocks: [{
   	class: "",
   	style: "",
   	value: *any*,
   	actions: [{
   		trigger: "",
   		scripts: [{
   			type: "",
   		}],
   	}],
   }],
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
})

Vollständig mit Master

html( raw(GIP_master({})) + 
raw(GIP_card({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   direction: "",
   class: "",
   style: "",
   blocks: [{
   	class: "",
   	style: "",
   	value: *any*,
   	actions: [{
   		trigger: "",
   		scripts: [{
   			type: "",
   		}],
   	}],
   }],
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
})
))

Key-Table

Beispiele

Card: Basis

Beschreibung

Wir möchten eine Card designen, um darin verschiedene Informationen strukturiert und ansprechend darzustellen. In diesem Beispiel sind dies Informationen zu einem Kater aus einem Tierheim. Wir nutzen die Blocks der Card, um die einzelnen Abschnitte unterschiedlich zu stylen. Hier verwenden wir den style-Key, aber dieses Styling könnte natürlich auch in Form von globalen CSS-Classes genutzt werden.

Code des Beispiels

Standalone Code mit Master

html(raw(GIP_master({})) +
raw(GIP_card({
		uniqueId: "Vermittlungskarte" + Nr,
		embedded: false,
		direction: "vertical",
		class: "",
		style: "background-color: #FFFCFA; border-color: #e5e2e0; padding: 25px; border-radius: 12px; color: #343a40; gap: 2px; justify-content: start;",
		blocks: [{
				class: "",
				style: "font-size: 2.5em; font-weight: bold; color: #e67e22; justify-content: start;",
				value: "Simba"
			}, {
				class: "",
				style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
				value: "— Steckbrief —"
			}, {
				class: "",
				style: "justify-content: start;",
				value: "Fellfarbe: Rot, Getigert"
			}, {
				class: "",
				style: "justify-content: start;",
				value: "Alter: 4 Jahre"
			}, {
				class: "",
				style: "justify-content: start;",
				value: "Lieblingsspielzeug: Federangel"
			}, {
				class: "",
				style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
				value: "— Mehr über Simba —"
			}, {
				class: "",
				style: "line-height: 1.6; text-align: justify; justify-content: start;",
				value: "Unser Simba ist ein verschmuster und verspielter Kater, der die Welt mit neugierigen Augen erkundet. Er liebt gemütliche Nachmittage auf dem Sofa genauso wie ausgiebige Jagdspiele. Simba sucht ein liebevolles Zuhause, in dem er für immer ankommen darf."
			}]
	})))

Embedded Code

GIP_card({
	uniqueId: "Vermittlungskarte" + Nr,
	embedded: true,
	direction: "vertical",
	class: "",
	style: "background-color: #FFFCFA; border-color: #e5e2e0; padding: 25px; border-radius: 12px; color: #343a40; gap: 2px; justify-content: start;",
	blocks: [{
			class: "",
			style: "font-size: 2.5em; font-weight: bold; color: #e67e22; justify-content: start;",
			value: "Simba"
		}, {
			class: "",
			style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
			value: "— Steckbrief —"
		}, {
			class: "",
			style: "justify-content: start;",
			value: "Fellfarbe: Rot, Getigert"
		}, {
			class: "",
			style: "justify-content: start;",
			value: "Alter: 4 Jahre"
		}, {
			class: "",
			style: "justify-content: start;",
			value: "Lieblingsspielzeug: Federangel"
		}, {
			class: "",
			style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
			value: "— Mehr über Simba —"
		}, {
			class: "",
			style: "line-height: 1.6; text-align: justify; justify-content: start;",
			value: "Unser Simba ist ein verschmuster und verspielter Kater, der die Welt mit neugierigen Augen erkundet. Er liebt gemütliche Nachmittage auf dem Sofa genauso wie ausgiebige Jagdspiele. Simba sucht ein liebevolles Zuhause, in dem er für immer ankommen darf."
		}]
})

Card: Steckbrief mit Bild

Beschreibung

Wir möchten eine Card designen, um darin verschiedene Informationen strukturiert und ansprechend darzustellen. In diesem Beispiel sind dies Informationen zu einem Kater aus einem Tierheim. In den Blocks der Card übergeben wir verschiedene Texte und auch ein Image-Modul, um ein Bild des Katers darzustellen.

Image by: Amber Kipp via Unsplash

Code des Beispiels

Standalone Code mit Master

html(raw(GIP_master({})) +
raw(GIP_card({
		uniqueId: "VermittlungskarteMitBild" + Nr,
		embedded: false,
		direction: "vertical",
		class: "",
		style: "background-color: #FFFCFA; border-color: #e5e2e0; padding: 25px; border-radius: 12px; color: #343a40; gap: 2px;",
		blocks: [{
				class: "",
				style: "font-size: 2.5em; font-weight: bold; color: #e67e22; justify-content: start;",
				value: "Simba"
			}, {
				class: "",
				style: "margin-top: 20px;",
				value: GIP_image({
						uniqueId: "Simba" + Nr,
						embedded: true,
						image: {
							value: "https://images.unsplash.com/photo-1573865526739-10659fec78a5",
							style: "width: 100%;"
						}
					})
			}, {
				class: "",
				style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
				value: "— Steckbrief —"
			}, {
				class: "",
				style: "justify-content: start;",
				value: "Fellfarbe: Rot, Getigert"
			}, {
				class: "",
				style: "justify-content: start;",
				value: "Alter: 4 Jahre"
			}, {
				class: "",
				style: "justify-content: start;",
				value: "Lieblingsspielzeug: Federangel"
			}, {
				class: "",
				style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
				value: "— Mehr über Simba —"
			}, {
				class: "",
				style: "line-height: 1.6; text-align: justify;",
				value: "Unser Simba ist ein verschmuster und verspielter Kater, der die Welt mit neugierigen Augen erkundet. Er liebt gemütliche Nachmittage auf dem Sofa genauso wie ausgiebige Jagdspiele. Simba sucht ein liebevolles Zuhause, in dem er für immer ankommen darf."
			}]
	})))

Embedded Code

GIP_card({
	uniqueId: "VermittlungskarteMitBild" + Nr,
	embedded: true,
	direction: "vertical",
	class: "",
	style: "background-color: #FFFCFA; border-color: #e5e2e0; padding: 25px; border-radius: 12px; color: #343a40; gap: 2px;",
	blocks: [{
			class: "",
			style: "font-size: 2.5em; font-weight: bold; color: #e67e22; justify-content: start;",
			value: "Simba"
		}, {
			class: "",
			style: "margin-top: 20px;",
			value: GIP_image({
					uniqueId: "Simba" + Nr,
					embedded: true,
					image: {
						value: "https://images.unsplash.com/photo-1573865526739-10659fec78a5",
						style: "width: 100%;"
					}
				})
		}, {
			class: "",
			style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
			value: "— Steckbrief —"
		}, {
			class: "",
			style: "justify-content: start;",
			value: "Fellfarbe: Rot, Getigert"
		}, {
			class: "",
			style: "justify-content: start;",
			value: "Alter: 4 Jahre"
		}, {
			class: "",
			style: "justify-content: start;",
			value: "Lieblingsspielzeug: Federangel"
		}, {
			class: "",
			style: "font-weight: bold; color: #6c757d; margin-top: 20px; margin-bottom: 5px; letter-spacing: 1px; text-transform: uppercase; justify-content: start;",
			value: "— Mehr über Simba —"
		}, {
			class: "",
			style: "line-height: 1.6; text-align: justify;",
			value: "Unser Simba ist ein verschmuster und verspielter Kater, der die Welt mit neugierigen Augen erkundet. Er liebt gemütliche Nachmittage auf dem Sofa genauso wie ausgiebige Jagdspiele. Simba sucht ein liebevolles Zuhause, in dem er für immer ankommen darf."
		}]
})

Drag: Aufgaben sortieren

Beschreibung

Wir möchten unseren Aufgaben per Drag&Drop einen neuen Status zuweisen. In diesem Beispiel nutzen wir das Card-Modul, um die Drop-Targets zu bauen. Es kann aber jedes GIP-Modul mit dem Actions-Key verwendet werden.

Für die Darstellung unserer Stati bauen wir uns zunächst mit einem Layout eine Spalte pro Status auf. Die Stati selbst stellen wir mit Cards dar, wobei wir den Titel separat stylen und danach mit dem Array an Aufgaben zusammenführen.

Jede Aufgabe soll von einer Spalte in eine andere gezogen werden können. Deshalb müssen wir jede Aufgabe mit einem Drag-Modul umschließen:

let my := this;
let statusValues := ((select Status) order by Reihenfolge);
GIP_layout({
	uniqueId: "Spalten Container" + Nr,
	embedded: false,
	direction: "horizontal",
	blocks: statusValues.{
		value: let status := this;
		GIP_card({
			uniqueId: "Spalte" + my.Nr + Nr,
			embedded: true,
			direction: "vertical",
			style: "justify-content: start; gap: 10px; background-color: " + Farbe,
			blocks: 
				let statusTitle := [{ //Titel der Status-Spalte
						style: "font-weight: 700; font-size: 14px;",
						value: Bezeichnung
					}];
				let statusTasks := Aufgaben.{ //Array aller Aufgaben mit dem aktuellen Status der Spalte
						value: GIP_drag({ //Jede Aufgabe wird ein Drag-Element und bekommt styling, um sie klar abzugrenzen
								uniqueId: "Aufgabe" + my.Nr + status.Nr + Nr,
								embedded: true,
								recordId: raw(Nr), //ID des Aufgaben-Records, der beim Drop geupdated werden soll
								style: "text-align: center; border: 1px dotted grey; border-radius: 3px; background-color: white;",
								value: Bezeichnung,
								draggable: true
							})
					};
				array(statusTitle, statusTasks)
		})
	}
})

Nachdem der Drag-Teil definiert ist, müssen wir noch übergeben, welche Action beim Drop auf welches Target ausgeführt werden soll. Unsere Drop-Targets sind die Status-Spalten, also die Cards. Wann immer eine Aufgabe auf eine Status-Card gedroppt wird, möchten wir in der Aufgabe das Status-Feld mit der Status-Zahl der Spalte updaten. Daher definieren wir pro Status-Card eine Action mit dem Trigger "drop" und ein Script vom Typ "dropUpdate". Darin übergeben wir die Field-ID des Aufgaben-Status-Felds und die neue Zahl, die dort eingetragen werden soll:

let my := this;
let statusValues := ((select Status) order by Reihenfolge);
GIP_layout({
	uniqueId: "Spalten Container" + Nr,
	embedded: false,
	direction: "horizontal",
	blocks: statusValues.{
		value: let status := this;
		GIP_card({
			uniqueId: "Spalte" + my.Nr + Nr,
			embedded: true,
			direction: "vertical",
			style: "justify-content: start; gap: 10px; background-color: " + Farbe,
			blocks: [...],
			actions: [{ //Die Action jeder Status-Spalte definiert, was beim Drop des Drag-Elements (also der Aufgabe) passieren soll [!code focus:7]
				trigger: "drop",
				scripts: [{
					type: "dropUpdate",
					fieldId: "E", //Feld-ID des "Status"-Felds in der Tabelle "Aufgaben"
					value: number(status) //Neuer Wert, der in das "Status"-Felds in der Tabelle "Aufgaben" eingetragen werden soll
				}]
			}]
		})
	}
})

Code des Beispiels

Standalone Code mit Master

let my := this;
let statusValues := ((select Status) order by Reihenfolge);
html(raw(GIP_master({})) +
raw(GIP_layout({
	uniqueId: "Spalten Container" + Nr,
	embedded: false,
	direction: "horizontal",
	blocks: statusValues.{
		value: let status := this;
		GIP_card({
			uniqueId: "Spalte" + my.Nr + Nr,
			embedded: true,
			direction: "vertical",
			style: "justify-content: start; gap: 10px; background-color: " + Farbe,
			blocks: 
				let statusTitle := [{
						style: "font-weight: 700; font-size: 14px;",
						value: Bezeichnung
					}];
				let statusTasks := Aufgaben.{
						value: GIP_drag({
								uniqueId: "Aufgabe" + my.Nr + status.Nr + Nr,
								embedded: true,
								recordId: raw(Nr),
								style: "text-align: center; border: 1px dotted grey; border-radius: 3px; background-color: white;",
								value: Bezeichnung,
								draggable: true
							})
					};
				array(statusTitle, statusTasks),
			actions: [{
				trigger: "drop",
				scripts: [{
					type: "dropUpdate",
					fieldId: "E",
					value: number(status)
				}]
			}]
		})
	}
})))

Embedded Code

let my := this;
let statusValues := ((select Status) order by Reihenfolge);
GIP_layout({
	uniqueId: "Spalten Container" + Nr,
	embedded: true,
	direction: "horizontal",
	blocks: statusValues.{
		value: let status := this;
		GIP_card({
			uniqueId: "Spalte" + my.Nr + Nr,
			embedded: true,
			direction: "vertical",
			style: "justify-content: start; gap: 10px; background-color: " + Farbe,
			blocks: 
				let statusTitle := [{
						style: "font-weight: 700; font-size: 14px;",
						value: Bezeichnung
					}];
				let statusTasks := Aufgaben.{
						value: GIP_drag({
								uniqueId: "Aufgabe" + my.Nr + status.Nr + Nr,
								embedded: true,
								recordId: raw(Nr),
								style: "text-align: center; border: 1px dotted grey; border-radius: 3px; background-color: white;",
								value: Bezeichnung,
								draggable: true
							})
					};
				array(statusTitle, statusTasks),
			actions: [{
				trigger: "drop",
				scripts: [{
					type: "dropUpdate",
					fieldId: "E",
					value: number(status)
				}]
			}]
		})
	}
})