imported>Andreas Plank: Doku Parameter

2014-01-20T10:46:38Z

Doku Parameter

← Nächstältere Version		Version vom 20. Januar 2014, 12:46 Uhr
Zeile 6:		Zeile 6:
	Diese Vorlage zeigt in einer Infozeile („Kopf“) den ersten Vorlagen-Parameter an zusätzlich mit einem ▼ Link-Verweis auf der rechten Seite. Hier lässt sich dann weiterer Text-Inhalt aussblenden, wenn man auf ▼ drückt.		Diese Vorlage zeigt in einer Infozeile („Kopf“) den ersten Vorlagen-Parameter an zusätzlich mit einem ▼ Link-Verweis auf der rechten Seite. Hier lässt sich dann weiterer Text-Inhalt aussblenden, wenn man auf ▼ drückt.

	===~~Optionale~~ Vorlagen-Parameter ===		===Vorlagen-Parameter ===
	* <~~code~~>style</~~code~~> = CSS-Formate für das Haupt-<div>
	* <code>headerstyle~~</code>~~ = CSS-Formate für ~~die~~ Kopfzeile		(''kursiv''= Pflichtparameter)
	* <code>contentstyle~~</code>~~ = CSS-Formate für den verbergbaren Inhalt		<div class="definition-inline">
	* <code>contentclass~~</code>~~ = CSS-Klasse für den verbergbaren Inhalt		; ''1='' <span style="font-weight: normal;">oder</span> ''header='': Titel/Kopfzeile
	* <code>toggle~~</code>~~ = '<tt>left</tt>'; der Switcher mit ▼/[+]/mehr... erscheint dann links.		; ''2='' <span style="font-weight: normal;">oder</span> ''content='': Inhalt der Box
			; style=: CSS-Formate für das Haupt-<div>
			; headerstyle=: CSS-Formate für Titel/Kopfzeile
			; contentstyle=: CSS-Formate für den verbergbaren Inhalt
			; contentclass=: CSS-Klasse für den verbergbaren Inhalt
			; toggle=: Voreinstellung rechts, abändern mit: '<tt>left</tt>'; der Switcher mit ▼/[+]/mehr... erscheint dann links.
			; switcher=: eines von<br/>plusminus[]<br/>plusminus()<br/>text<br/>text: Anzeigetext<br/>text: Anzeigetext/Verbergentext
			</div>

	== Beispiele ==		== Beispiele ==

imported>Iris Leininger: 1 Version

2013-10-23T11:24:10Z

1 Version

← Nächstältere Version	Version vom 23. Oktober 2013, 13:24 Uhr
(kein Unterschied)

imported>Andreas Plank: Die Seite wurde neu angelegt: „{{Documentation/subpage}} ==Benutzung== Diese Vorlage zeigt in einer Infozeile („Kopf“) den ersten Vorlagen-Parameter an zusätzlich mit einem ▼ Link-…“

2012-08-24T09:19:35Z

Die Seite wurde neu angelegt: „{{Documentation/subpage}} ==Benutzung== Diese Vorlage zeigt in einer Infozeile („Kopf“) den ersten Vorlagen-Parameter an zusätzlich mit einem ▼ Link-…“

Neue Seite

{{Documentation/subpage}}

==Benutzung==

Diese Vorlage zeigt in einer Infozeile („Kopf“) den ersten Vorlagen-Parameter an zusätzlich mit einem ▼ Link-Verweis auf der rechten Seite. Hier lässt sich dann weiterer Text-Inhalt aussblenden, wenn man auf ▼ drückt.

===Optionale Vorlagen-Parameter ===
* <code>style</code> = CSS-Formate für das Haupt-<div>
* <code>headerstyle</code> = CSS-Formate für die Kopfzeile
* <code>contentstyle</code> = CSS-Formate für den verbergbaren Inhalt
* <code>contentclass</code> = CSS-Klasse für den verbergbaren Inhalt
* <code>toggle</code> = '<tt>left</tt>'; der Switcher mit ▼/[+]/mehr... erscheint dann links.

== Beispiele ==

=== Öffnen/schließen: (+) [+] ▼ …===
<code><nowiki>{{Hidden|1=Titel |2=Inhalte}}</nowiki></code>
ergibt…
{{Hidden|1=Titel |2=Inhalte}}
{{-}}

<code><nowiki>{{Hidden|1='''Titel''' |2=Inhalte | switcher = plusminus[]}}</nowiki></code>
ergibt…
{{Hidden|1='''Titel''' |2=Inhalte | switcher = plusminus[]}}
{{-}}

<code><nowiki>{{Hidden|1=Titel |2=Inhalte | switcher = plusminus()}}</nowiki></code>
ergibt…
{{Hidden|1=Titel |2=Inhalte | switcher = plusminus()}}
{{-}}

<code><nowiki>{{Hidden|1=Titel |2=Inhalte | switcher = text}}</nowiki></code>
ergibt…
{{Hidden|1=Titel |2=Inhalte | switcher = text}}
{{-}}

<code><nowiki>{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …}}</nowiki></code>
ergibt…
{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …}}
{{-}}

<code><nowiki>{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …/verbergen}}</nowiki></code>
ergibt…
{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …/verbergen}}
{{-}}

Tabellenzeilen können mit dem Parameter <code>collapse = table row</code> eingeklappt werden, jedoch muß HTML-Syntax verwendet werden:
<source lang="html4strict">
<table class="wikitable">
<tr>
<td> 1. Zeile </td>
<td> 1. Zeile </td>
</tr>

{{Hidden
| collapse = table row
| 1 = <td colspan="2">Titel</td>
| 2 = <td >Spalte 1</td><td >Spalte 2</td>
}}
<tr>
<td> letzte Zeile </td>
<td> letzte Zeile </td>
</tr>
</table>
</source>
ergibt…
<table class="wikitable">
<tr>
<td> 1. Zeile </td>
<td> 1. Zeile </td>
</tr>

{{Hidden
| collapse = table row
| 1 = <td colspan="2">Titel</td>
| 2 = <td >Spalte 1</td><td >Spalte 2</td>
}}
<tr>
<td> letzte Zeile </td>
<td> letzte Zeile </td>
</tr>
</table>

=== Ausrichtung ===
<source lang="html4strict">
{{Hidden
| toggle = left
| headerstyle = text-align:left;
| 1 = Formatierung mit toggle=left und text-align:left;
| 2 = Viel Text, viel Text…
}}
</source>
…ergibt…
{{Hidden
| toggle = left
| headerstyle = text-align:left;
| 1 = Formatierung mit <code>toggle=left</code> und <code>text-align:left;</code>
| 2 = Viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text.
}}

=== Ränder/Einrückung ===

Wikieinrückung mit „:“
<source lang="html4strict">
:{{Hidden
| style = border:1px dotted black;padding:0.25em;
| contentstyle= border-top:1px dotted;padding:0.25em;
| 1 = {{Logo | Typ= Tip | Höhe = 14px}}   Titel
| 2 = Viel Text, viel Text…
}}
</source>
ergibt:
:{{Hidden
| style = border:1px dotted black;padding:0.25em;
| contentstyle= border-top:1px dotted;padding:0.25em;
| 1 = {{Logo | Typ= Tip | Höhe = 14px}}   Titel
| 2 = Viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text.
}}
{{-}}

<source lang="html4strict">
{{Hidden
| style = margin-left:10%; margin-right:10%;border:1px solid #fcaf3e;border-radius:4px;
| switcher = plusminus()
| headerstyle = background:#fcaf3e;padding:0.25em;text-align:left;
| contentstyle = background:#fce94f; color:blue;border:1px solid #fcaf3e;padding:0.25em;
| 1 = „Zentriert“ mit Randangabe links-rechts
| 2 = Viel Text, viel Text…
}}
</source>
ergibt:
{{Hidden
| style = margin-left:10%; margin-right:10%;border:1px solid #fcaf3e;border-radius:4px;
| switcher = plusminus()
| headerstyle = background:#fcaf3e;padding:0.25em;text-align:left;
| contentstyle = background:#fce94f; color:blue;border:1px solid #fcaf3e;padding:0.25em;
| 1 = „Zentriert“ mit Randangabe links-rechts + runder Rahmen (moderne Browser)
| 2 = Viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text, viel Text.
}}
{{-}}

===Trick um Listen im einklappbaren Teil zu erzeugen===

Um z.B. eine Liste innerhalb zu erzeugen, muß man in die Trickkiste greifen und für den Inhalts-Parameter 2 „leeren“ Inhalt zuerst mit <span> übergeben:
<source lang="html4strict">
{{Hidden
| style = width: 50%;
| switcher = plusminus()
| headerstyle = background:#d3daed;padding:0.25em;text-align:left;
| contentstyle = background:#f6f8fc; color:blue;border:1px solid #d3daed;padding:0.25em;
| 1 = Titel
| 2 = <span></span>
* Text 1
* Text 2
* Text 3
}}
</source>
ergibt:
{{Hidden
| style = width: 50%;
| switcher = plusminus()
| headerstyle = background:#d3daed;padding:0.25em;text-align:left;
| contentstyle = background:#f6f8fc; border:1px solid #d3daed;padding:0.25em;
| 1 = Titel
| 2 = <span></span>
* Text 1
* Text 2
* Text 3
}}

== Siehe auch ==
* [[Vorlage: Nebeneinander]]

== Technische Anmerkungen ==

Mit den optionalen Parametern <code>switcheropen</code> oder <code>switcherclose</code> lassen sich auch kleine Bilder statt Text zum Öffnen/Schließen einbinden.

Die Vorlage nutzt <div>-Elemente oder Tabellenzeilen (<tr>) mit vordefinierten CSS-Klassen in folgender Schachtelung:
div.collapsebox
├ div.switcher (-> floating)
├ div.collapsetitle
└ div.collapsecontent

tr.collapsebox
└ th/td
├ div.switcher (-> floating)
└ div.collapsetitle
tr.collapsecontent

[[Category:Vorlagenprogrammierung|{{PAGENAME}}]]
[[Kategorie:Textgestaltung|{{PAGENAME}}]]

===Wiki-Mechanismus===

====Normal====
div.mw-collapsible[.mw-collapsed]
└─ div.mw-collapsible-content
<div class="toccolours mw-collapsible mw-collapsed">
Text der bleibt …
<div class="mw-collapsible-content">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>

Mit anderem Klapp-Text (nur HTML 5), wobei der Klick-Schalter immer rechts bleibt.
<span class="comment-gray" >div.mw-collapsible[.mw-collapsed]}}</span> & data-expandtext="+" data-collapsetext="–"
<span class="comment-gray" > └─ div.mw-collapsible-content</span>
<div class="toccolours mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="–">
Text der bleibt …
<div class="mw-collapsible-content">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>

====Ferngesteuert====
· span.mw-customtoggle-<span style="color:brown">''myID''</span>

div.mw-collapsible mw-collapsed id="mw-customcollapsible-<span style="color:brown">''myID''</span>"
└─ div.mw-collapsible-content

<span class="mw-customtoggle-myID1" ></span>
<div class="mw-collapsible mw-collapsed toccolours" id="mw-customcollapsible-myID1">
Text der bleibt …
<div class="mw-collapsible-content">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>

<span class="mw-customtoggle-myID2" data-expandtext="(+)" data-collapsetext="(–)"></span> Mit Benutzung von <code>data-expandtext="…"</code> <code>data-collapsetext="…"</code>
<div class="mw-collapsible mw-collapsed toccolours" id="mw-customcollapsible-myID2">
Text der bleibt … <span class="mw-customtoggle-myID2" data-expandtext="ansehen" data-collapsetext="wieder zuklappen"></span>
<div class="mw-collapsible-content">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>

<includeonly>


</includeonly>

Vorlage:Hidden/doc - Versionsgeschichte

imported>Andreas Plank: Doku Parameter

imported>Iris Leininger: 1 Version

imported>Andreas Plank: Die Seite wurde neu angelegt: „{{Documentation/subpage}} ==Benutzung== Diese Vorlage zeigt in einer Infozeile („Kopf“) den ersten Vorlagen-Parameter an zusätzlich mit einem ▼ Link-…“