Cards¶
Cards bilden einen flexiblen und erweiterbaren Inhaltscontainer. Cards können einen Header und Footer, sowie unterschiedliche Inhalte besitzen.
| Schlüssel | Beschreibung | Default | Beispiel |
|---|---|---|---|
| class | Klasse der Card | card | myclass |
| id | ID des Tabs | undefined | myID |
Objektreferenz¶
Card(options)
Beschreibung
Der Konstruktor erstellt ein neues Card-Objekt
Parameter-Liste
option (Object)
Optionen
Rückgabewert
Card-Objekt
Card.addBody(content)
Beschreibung
Inhalte der Card hinzufügen
Parameter-Liste
content (Alvine.UI.Control|String)
Inhalt, der im Body angezeigt werden soll.
Rückgabewert
Card-Objekt
Card.setHeader(content, headerClass)
Beschreibung
Der Konstruktor erstellt ein neues Card-Objekt
Parameter-Liste
content (Alvine.UI.Control|String)
Inhalt, der im Head-Bereich angezeigt werden soll.
headerClass (String)
Css-Klassen die dem Header hinzugefügt werden sollen
Rückgabewert
Card-Objekt
Card.setFooter(content, footerClass)
Beschreibung
Der Konstruktor erstellt ein neues Card-Objekt
Parameter-Liste
content (Alvine.UI.Control|String)
Inhalt, der im Footer angezeigt werden soll.
footerClass (String)
Css-Klassen die dem Footer hinzugefügt werden sollen
Rückgabewert
Card-Objekt
CardContainer¶
Mit Hilfe von CardContainer lassen sich Cards wie bei Masonry auf einer Seite ausfüllend positionieren.
| Schlüssel | Beschreibung | Default | Beispiel |
|---|---|---|---|
| class | Klasse des Containers | card-columns | myclass |
| id | ID des Tabs | undefined | myID |
container = new Alvine.Package.UI.Dialog.CardContainer();
card1 = new Alvine.Package.UI.Dialog.Card();
card1.setHeader('Header 1');
card1.addBody(new Alvine.Package.UI.Dialog.Blockquote('Lorem ipsum dolor sit amet, ...', {'class': 'lead'}));
container.addCard(card1);
card2 = new Alvine.Package.UI.Dialog.Card();
card2.addBody(new Alvine.Package.UI.Dialog.Blockquote('Lorem ipsum dolor sit amet, ...', {'class': 'lead'}));
container.addCard(card2);Objektreferenz¶
CardContainer(options)
Beschreibung
Der Konstruktor erstellt ein neues CardContainer-Objekt
Parameter-Liste
option (Object)
Optionen
Rückgabewert
CardContainer-Objekt
CardContainer.addCard(card)
Beschreibung
Fügt ein Card-Objekt zum Container hinzu
Parameter-Liste
card (Card)
Card-Objekt
Rückgabewert
CardContainer-Objekt