Container

Die Container-Objekte bilden das Grid-System von Bootstrap ab.

// Zwei Spalten
col1 = new Alvine.Package.UI.Dialog.ContainerColumn('col01', {'class': 'col'});
col2 = new Alvine.Package.UI.Dialog.ContainerColumn('col01', {'class': 'col'});

// Eine Zeile
row = new Alvine.Package.UI.Dialog.ContainerRow();
row.addColumn(col1);
row.addColumn(col2);

// Ein Container
container = new Alvine.Package.UI.Dialog.Container();   
container.addRow(row);

Diese Anweisungen ergeben folgende HTML-Struktur.

<div class="container-float">
  <div class="row">
    <div class="col">col01</div>
    <div class="col">col01</div>
  </div>
</div>

Schlüssel	Beschreibung	Default	Beispiel
class	Klasse des Containers	row
id	ID der Zeile	zufällige ID

Über Hilfsfunktionen können Inhalte schneller und ohne das Erstellen der übergeordneten Struktur hinzugefügt werden. Die Methode Container.addContent(content, rowOptions, colOptions) fügt einen Inhalt zum Container hinzu und fügt diesen automatisch in ein ContainerColumn und ContainerRow ein. Mit dieser Funktion ist immer nur eine Spalte pro Zeile verwendbar.

container = new Alvine.Package.UI.Dialog.Container();   
container.addContent('Inhalt');

Funktionsreferenz

Container(options)

Beschreibung

Der Konstruktor erstellt ein neues Container-Objekt

---

Parameter-Liste

options (Objekt)

---

Rückgabewert

Container-Objekt

addContent(content, rowOptions, colOptions)

Beschreibung

Diese Methode fügt den übergebenen Inhalt content in die entsprechende Struktur aus Rows und Columns ein.

---

Parameter-Liste

content (Array | ContainerRow | String | HtmlFragment)

Der einzufügende Inhalt, Wird ein Array übergeben, so werden jeweils 12 Inhalte in eine Zeile gepackt.

rowOptions (Object)

Konfiguration der Zeile

colOptions (Object)

Konfiguration der Spalten

---

Rückgabewert

Container-Objekt

addRow(row)

Beschreibung

Fügt dem Container eine Reihe hinzu.

---

Parameter-Liste

content (ContainerRow | String | HtmlFragment)

Der einzufügende Inhalt

row (ContainerRow)

---

Rückgabewert

Container-Objekt

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

json = {
    "options": {},
    "content": [
        {
        "name": "Alvine.Package.UI.Dialog.ContainerRow",
        "dataset":{
            "options": {},
            "columns": []
            }
        }
    ]
};
container = new Alvine.Package.UI.Dialog.Container.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

ContainerRow

Eine Zeile lässt sich über ContainerRow(options) erstellen.

row = new Alvine.Package.UI.Dialog.ContainerRow({'id':'myID'});

Die optionalen Options können der folgenden Tabelle entnommen werden.

Schlüssel	Beschreibung	Default	Beispiel
class	Klasse der Zeile	row
id	ID der Zeile	zufällige ID

Auf Ebene der Zeile kann ebenfalls mit einer Hilfsfunktion schnell ein Inhalt erstellt werden. Hierzu muss die Methode ContainerRow.addContent(content, options) aufgerufen werden. Über die optionalen Optionen kann das ContainerColumn angepasst werden.

row = new Alvine.Package.UI.Dialog.ContainerRow(); 
row.addColumn(col1);

Mit Hilfe der Methode ContainerRow.getRows() lässt sich die aktuelle Zeilenstruktur auslesen.

Über die Hilfsfunktion ContainerRow.addContent(content, options) kann eine neue Spalte ohne die Definition des ContainerColumn eingefügt werden.

row = new Alvine.Package.UI.Dialog.ContainerRow();
row.addContent('Mein Inhalt');

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

json = {
  "options": {},
  "columns": [
    {
        "name": "Alvine.Package.UI.Dialog.ContainerColumn",
        "dataset": {
            "options": {},
            "content": {}
        }
    },
    {
        "name": "Alvine.Package.UI.Dialog.ContainerColumn",
        "dataset": {
            "options": {},
            "content": {}
        }
    }
    ]
};
row = new Alvine.Package.UI.Dialog.ContainerRow.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));

ContainerColumn

Eine Spalte lässt sich über ContainerColumn(content, options) erstellen. Der Inhalt der Spalte wird über das Argument content hinzugefügt.

col = new Alvine.Package.UI.Dialog.ContainerColumn('content',{'id':'myID'});

Die optionalen Options können der folgenden Tabelle entnommen werden.

Schlüssel	Beschreibung	Default	Beispiel
class	Klasse der Zeile (Flexbox ohne Zahl)	col
id	ID der Zeile	undefined

getInstanceFromDataset

json = {
        "options": {'class': 'col-12 col-md-8'},
        "content": {
            "name": "Alvine.Package.UI.Dialog.H2",
            "dataset": {
                "title": "Überschrift H2"
            }
        }
};
col = new Alvine.Package.UI.Dialog.ContainerColumn.prototype.getInstanceFromDataset(new Alvine.DOM.Dataset(json));