root
a-text-left a-text-right
first-text-left first-text-right
first
last-text-left last-text-right
last


Vorlage für eine Out-Tree mit mindestens zwei bis maximal zehn Kindelementen auf einer Zeile. Für mehr Ebenen kann ein Baum im Baum erstellt werden.

Einfügen

Bearbeiten

Bei nur 2 Kindelementen kann der Block "mittlere Kindelemente" gelöscht werden. Falls mehrere "mittlere Kindelemente erforderlich sind, muss der Block vervielfacht werden. Bei den mittleren Kindelementen wird das X jeweils durch die Nummer des zu formatierenden Kindelements ersetzen (Ziffern 2 - 9). Also 2 für alle Parameter welche das 2. Kindelement betreffen.

{{:SCLO/ Vorlage: Baum

<!-- Wurzel -->
|root=
<!-- Erstes Kindelement -->
|first=
<!-- Mittlere Kindelemente : X jeweils durch die Nummer des zu formatierenden Kindelements ersetzen (Ziffern 2 - 9).-->
|x=
<!-- Letztes Kindelement -->
|last=

}}


Einfach mit Beschriftung der Linien

Bearbeiten
{{:SCLO/ Vorlage: Baum

<!-- Wurzel -->
|root=
|a-text-left=
|a-text-right=

<!-- Erstes Kindelement -->
|first=
|first-text-left=
|first-text-right=

<!-- Mittlere Kindelemente : X jeweils durch die Nummer des zu formatierenden Kindelements ersetzen (Ziffern 2 - 9).-->
|x=
|x-text-left=
|x-text-right=

<!-- Letztes Kindelement -->
|last=
|last-text-left=
|last-text-right=

}}

vollständig

Bearbeiten
{{:SCLO/ Vorlage: Baum

<!-- den ganzen Baum betreffend -->
|style=
|style-all=
|line=

<!-- Wurzel -->
|root-style=
|root=
|a-line=
|a-text-left=
|a-text-left-style=
|a-text-right=
|a-text-right-style=

<!-- Erstes Kindelement -->
|first-style-all=
|first-style=
|first=
|first-line=
|first-text-left=
|first-text-left-style=
|first-text-right=
|first-text-right-style=

<!-- Mittlere Kindelemente : X jeweils durch die Nummer des zu formatierenden Kindelements ersetzen (Ziffern 2 - 9).-->
|x-style-all=
|x-style=
|x=
|x-line=
|x-text-left=
|x-text-left-style=
|x-text-right=
|x-text-right-style=

<!-- Letztes Kindelement -->
|last-style-all=
|last-style=
|last=
|last-line=
|last-text-left=
|last-text-left-style=
|last-text-right=
|last-text-right-style=

}}

Parameter

Bearbeiten

Inhalt der Kästen

Bearbeiten
  • root=: Inhalt des Wurzelelements (root)
  • first=: Inhalt des ersten Kindelements
  • 2=, 3=, 4=, 5=, 6=, 7=, 8= und 9=: Inhalt der Kindelemente 2-9.
  • last=: Inhalt des letzten Kindelements

Rahmenbeschriftungen (text-left und text-right)

Bearbeiten
  • a-text-right= / a-text-left=: Beschriftung der Linie welche vom Mutterelement (root) wegführt (rechts/links davon)
  • first-text-right= / first-text-left=: Beschriftung der Linie zum ersten Kindelement (rechts/links davon)
  • x-text-right= / x-text-left=: Beschriftung der Linie zu den mittleren Kindelementen (rechts/links davon). x wird durch die jeweilige Nummer des Kindelement ersetzt.
  • last-text-rigth= / last-text-left=: Beschriftung der Linie zum letzten Kindelement (rechts/links davon)

Rahmen um den Text mit: x-text-left=<div style="display:inline-block; border: Farbe Rahmenart Dicke"> Text </div>

Linienformatierung (line)

Bearbeiten

Die Formatierung der Linien erfolt mit line= Farbe Form Dicke.

  • line=: Formatierung aller Verbindungslinien der Baumstruktur (Rahmen der Element sind nicht betroffen, sie werden mit dem style-Attribut angepasst).
  • a-line=: Formatierung der vom Mutterelement (root) wegführenden vertikalen Linie.
  • first-line=: Formatierung der zum ersten Kindelement führenden vertikalen Linie.
  • x-line=: Formatierung der zu den mittleren Kindelementen führenden vertikalen Linie (x durch die Nummer des jeweiligen Kindelements ersetzen).
  • last-line=: Formatierung der zum letzten Kindelement führenden vertikalen Linie.

Style-Variablen

Bearbeiten

Trennung der Attribute mit ;. x-style-all bei den Kindelemente betrifft jeweils eine 2x2-Zellen-Tabelle, inkl. der vertikalen Linie zum Kasten. Hier kann zum Beispiel die Ausrichtung des Textes (text-align:left/right) für den Inhalt des jeweiligen Kastens formatiert werden. Rahmen, Schriftfarbe und -typ etc. sollten aber mit der x-style= Variablen formatiert werden.

  • style=: Für die Ausrichtung des Baums im Text (display:; float:;)
  • style-all=: Betrifft die gesamte Baumstruktur (Tabelle).
    • Beispiel: style-all=border: red solid 1pt bewirkt einen Rahmen um den gesamten Baum.
  • root-style=: Betrifft das Aussehen der Box und des Inhaltes des Wurzelelements (root).
  • first-style-all=: Betrifft das gesamte 1. Kindelement.
  • first-style=: Betrifft nur den Inhalt des first-Kastens.
  • x-style-all=: Betrifft das gesamte x. (x mit der Nummer des jeweiligen Kindelements ersetzen) Kindelement.
  • x-style=: Betrifft nur den Inhalt des x. Kindelements.
  • last-style-all=: Betrifft das gesamte letzte Kindelement.
  • last-style=: Betrifft nur den Inhalt des letzten Kindelements.


  • a-text-right-style= / a-text-left-style=: Formatierung des Beschriftungstextes der vom Mutterelement (root) wegführenden vertikalen}}
  • first-text-right-style= / first-text-left-style=: Formatierung des Beschriftungstextes der zum ersten Kindelement führenden, vertikalen Linie.
  • x-text-right-style= / x-text-left-style=: Formatierung des Beschriftungstextes der zum jeweiligen Kindelement führenden, vertikalen Linie.
  • last-text-right-style= / last-text-right-style=: Formatierung des Beschriftungstextes der zum jeweiligen Kindelement führenden, vertikalen Linie.

Beispiele

Bearbeiten

Baum im Baum

Bearbeiten

! Im style-all des Elements in welchem ein neuer Baum gestarte wird muss border: none angegeben werden, da sonst ein Rahmen um den gesamten folgenden Inhalt entsteht.

{{:SCLO/ Vorlage: Baum
|root= root
|first-style=border: none;
|first=
{{:SCLO/ Vorlage: Baum
|root=first-root
|first=first-first
|2=first-2
|last=first-last
}}
|2=2
|last=last
}}


root
   
   
first-root
   
   
first-first

   
first-2
   
first-last

   
2
   
last


farbiges Beispiel

Bearbeiten
root
a-text-left  
   
first

   
zweites Kindelement
   
last
{{:SCLO/ Vorlage: Baum
<!-- den ganzen Baum betreffend -->
|style-all=border: blue groove 5pt;
|line=red dotted 2pt

<!-- Wurzel -->
|root-style=border: green solid 2pt
|root=root
|a-line=blue dashed 2pt
|a-text-left= a-text-left
|a-text-left-style= color: blue;

<!-- Erstes Kindelement -->
|first-style-all=border:yellow dotted 2pt
|first-style=border: maroon solid 2pt
|first=first
|first-line=maroon dotted 2pt

<!-- Mittlere Kindelemente : X jeweils durch die Nummer des zu formatierenden Kindelements ersetzen (Ziffern 2 - 9).-->
|2-style=border: navy solid 2pt
|2=zweites Kindelement
|2-line=navy dotted 2pt
<!-- Letztes Kindelement -->
|last-style=border: mediumvioletred solid 2pt
|last=last
|last-line= mediumvioletred dotted 2pt
}}

mögliche Probleme

Bearbeiten
  • gesamter Baum liegt zu weit rechts (z.B. bei langem first-text-right): Lösung style-all=margin: 0 0 0 -xem
  • x-text wird umgebrochen, sollte aber auf einer Zeile liegen. Lösung: x-text=<div style="white-space:nowrap; ">x-text</div>
  • Seitliche Verschiebung der Kindblöcke bei Eingabe sowohl eines text-right als auch eines text-left gleichzeitig. Lösung: Beide Texte müssen ungefähr gleich lang sein. Evtl Ausgleich auf einer Seite mit geschütztem Leerzeichen (&nbsp;).
  • Rahmen der Linienbeschriftung ist zu gross wenn er mit x-text-right-style=border: gemacht wird. Lösung: Rahmen um den Text mit: x-text-left=<div style="display:inline-block; border: Farbe Form Dicke"> Text </div>

verwendete Vorlage

Bearbeiten

/Kindelement

Quelltext

Bearbeiten