Komponenten (print-styleguide)
- Dirk Münker
- Sebastian Schulz
- Christopher Holden
- Dominik Hisler
Container
Die Containerkomponente kann genutzt werden um Elemente nebeneinander darzustellen. Hierzu stehen die folgenden Varianten zur Verfügung.
Variantenname | Beschreibung |
|---|---|
| Sorgt für die Anordnung der Kindelemente, sodass diese nebeneinander stehen. Die verfügbare Breite wird hierbei in 12 gleichmäßige Spalten unterteilt. |
| Muss Kindelementen des Containers mit der vorherigen Variante gegeben werden. Zusätzlich kann die Breite der Spalte mit |
Bilder
Diese Komponente kann zur Einbindung von Bildern genutzt werden. Über die nachfolgenden Varianten kann die Skalierung angepasst werden.
Variantenname | Beschreibung |
|---|---|
| Setzt die maximale Höhe des Bildes anhand des 16:9-Verhältnisses |
| Streckt das Bild auf die maximal verfügbare Breite. Die Höhe ergibt sich entsprechend des Seitenverhältnisses. |
| Streckt das Bild auf die maximal verfügbare Höhe. Die Breite ergibt sich entsprechend des Seitenverhältnisses. |
Layout
Repräsentiert eine Einbettungsebene für ein konfiguriertes Layout. Es kann nur auf der obersten Ebene genutzt werden und kann nur Seitenkomponenten enthalten.
Page
Repräsentiert eine Seite. Intial werden alle zu platzierenden Elemente auf einer Seite entsprechend ihres Layouts platziert. Das Javascript übernimmt dann die Verteilung auf Einzelseiten.
Paragraph
Wird für formatierten Text (strong, em, ul, li, a, etc.) genutzt und kann mit den nachfolgenden Varianten verändert werden.
Variantenname | Beschreibung |
|---|---|
| Setzt die Schriftgröße auf |
| Setzt die Schriftgröße auf |
| Setzt die Schrifgröße auf die Überschriftgrößen entsprechend des Levels |
| Zentriert den Inhalt der Komponente |
| Richtet den Inhalt rechtsbündig aus |
| Unterteilt den Inhalt in horizontale Spalten. Mit den zusätzlichen Varianten |
Spacer
Stellt einen vertikalen Abstand dar welche über die folgenden Varianten verändert werden kann.
Variantenname | Beschreibung |
|---|---|
| Erlaubt dem Spacer eine größere Höhe anzunehmen als durch eine andere Variante definiert. Dadurch kann bspw. ein nachfolgendes Element an das Ende der Seite gedrückt werden. |
| Definiert die Höhe des Spacers |
Table
Eine Tabelle verfügt über folgende Optionen welche über das Attribut data-print-options gesetzt werden können:
Optionname | Beschreibung |
|---|---|
| Wiederholt den Kopfbereich der Tabelle bei jedem Seitenumbruch. |
| Wiederholt den Fußbereich der Tabelle bei jedem Seitenumbruch. |
Zudem können die folgenden Attribute gesetzt werden:
Attribut | Beschreibung |
|---|---|
| Legt die Anzahl an Inhaltszeilen fest welche mindestens platziert werden müssen. |
| Legt die Anzahl an Inhaltszeilen fest welche mindestens für die letzte Platzierung vorhanden sein müssen. |