Typography¶

Headings¶

Die Überschriften-Controls stellen eine einfache Möglichkeit bereit, Überschriften zu definieren.

Headings

Über die Klassen-Eigenschaft kann die Display-Größe von Bootstrap gesetzt werden.

// Große Überschrift 
heading = new Alvine.Package.UI.Dialog.H1('Bootstrap Display 1',{'class':'display-1'}));

// Normale Überschirft
heading = new Alvine.Package.UI.Dialog.H1('Bootstrap Heading 1');

Über den Parameter options kann folgender Wert definiert werden:

Schlüssel	Beschreibung	Default	Beispiel
class	Klasse der Überschrift	undefined	display-1

Abgeleitet von Heading sind die Objekte H1,H2,H3,H4,H5,H6

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
    "title": "Bootstrap Display 1",
    "options": {}
}
heading = new Alvine.Package.UI.Dialog.H1.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Paragraph¶

Das Paragraph-Control ist ein einfacher Textblock, der in

Tags eingebunden wird.

// Lead-Paragraph
lead = new Alvine.Package.UI.Dialog.Paragraph('Lorem ipsum dolor sit amet, ...', {'class': 'lead'}));

// Normaler Paragraph
paragraph = new Alvine.Package.UI.Dialog.Paragraph('Lorem ipsum dolor sit amet, ...'));

Über den Parameter options kann folgender Wert definiert werden:

Schlüssel	Beschreibung	Default	Beispiel
class	Klasse des Paragraphen	undefined	lead

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
   "text": "Lorem ipsum dolor sit amet, ...",
   "options": {}
}
heading = new Alvine.Package.UI.Dialog.Paragraph.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Zitat/Blockquotes¶

Das Zitat-Control ist ein Textblock, der in <blockquotes> Tags eingebunden wird. Das Objekt wird über den Konstruktor Alvine.Package.UI.Dialog.Blockquote() erstellt.

// Lead-Paragraph
lead = new Alvine.Package.UI.Dialog.Blockquote('Lorem ipsum dolor sit amet, ...', {'class': 'lead'}));

// Normaler Paragraph
paragraph = new Alvine.Package.UI.Dialog.Blockquote('Lorem ipsum dolor sit amet, ...'));

Über den Parameter options können folgende Wert definiert werden:

Schlüssel	Beschreibung	Default	Beispiel
class	Klasse des Controls	blockquote	blockquote m-b-2
footer	Zitat Fußzeile	undefined	Albert Einstein
class-footer	Klasse der Fußzeile	blockquote-footer	m-y-2

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
   "text": "Lorem ipsum dolor sit amet, ...",
   "options": {}
}
heading = new Alvine.Package.UI.Dialog.Blockquote.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

Liste¶

Eine einfache Liste kann über das List-Objekt Alvine.Package.UI.Dialog.List() erstellt werden.

// Ohne Optionen
list = new Alvine.Package.UI.Dialog.List(['Lorem ipsum dolor sit amet', 'Consectetur adipiscing elit', 'Integer molestie lorem at massa']));

// Mit Optionen
list = new Alvine.Package.UI.Dialog.List(['Lorem ipsum dolor sit amet', 'Consectetur adipiscing elit', 'Integer molestie lorem at massa'], {'class':'list-unstyled'}));

Über den Parameter options können folgende Wert definiert werden:

Schlüssel	Beschreibung	Default	Beispiel
class	Klasse des Controls		list-unstyled

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
  "rows":[
            'Lorem ipsum dolor sit amet', 
            'Consectetur adipiscing elit', 
            'Integer molestie lorem at massa'
   ],
   "options": {}
}
list = new Alvine.Package.UI.Dialog.List.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

HR - Trenner¶

Der horizontale Trennstrich erlaubt eine Trennung von unterschiedlichen Elementen. Das Control fügt ein <hr> Element in das DOM ein.

hr = new Alvine.Package.UI.Dialog.HR({'class':'my-4'});

Schlüssel	Beschreibung	Default	Beispiel
class	Klasse des Elements	undefined	my-2

Über die Methode getInstanceFromDataset wird eine Instance von einem Alvine.DOM.Dataset zurück geliefert.

json = {
   "options": {}
}
heading = new Alvine.Package.UI.Dialog.HR.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));