Vorlage:Hidden/doc

Aus Offene Naturführer BiolFlor
Wechseln zu: Navigation, Suche
Edit-copy green.svg This is a documentation subpage for Vorlage:Hidden (see that page for the vorlage itself).
It contains usage information, categories and other content that is not part of the original vorlage page.


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

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

Beispiele

Öffnen/schließen: (+) [+] ▼ …

{{Hidden|1=Titel |2=Inhalte}} ergibt…

▼▲
Titel


{{Hidden|1='''Titel''' |2=Inhalte | switcher = plusminus[]}} ergibt…

[+][−]
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = plusminus()}} ergibt…

(+)(−)
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = text}} ergibt…

(mehr…)(weniger anzeigen)
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …}} ergibt…

(anzeigen …)(weniger anzeigen)
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …/verbergen}} ergibt…

(anzeigen …)(verbergen)
Titel


Tabellenzeilen können mit dem Parameter collapse = table row eingeklappt werden, jedoch muß HTML-Syntax verwendet werden: 

<table class="wikitable">
<tr>
<td> 1. Zeile </td>
<td> 1. Zeile </td>
</tr>
<!-- eigenständige Tabellenzeile! -->
{{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>

ergibt…

1. Zeile 1. Zeile
▼▲
Titel
letzte Zeile letzte Zeile

Ausrichtung

{{Hidden
 | toggle      = left
 | headerstyle = text-align:left;
 | 1 = Formatierung mit toggle=left und text-align:left;
 | 2 = Viel Text, viel Text…
}}

…ergibt…

▼▲
Formatierung mit toggle=left und text-align:left;

Ränder/Einrückung

Wikieinrückung mit „:“ 

:{{Hidden
 | style       = border:1px dotted black;padding:0.25em;
 | contentstyle= border-top:1px dotted;padding:0.25em;
 | 1 = {{Logo | Typ= Tip | Höhe = 14px}} &nbsp; Titel 
 | 2 = Viel Text, viel Text…
}}

ergibt:

▼▲
Tipps   Titel


{{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…
}}

ergibt:

(+)(−)
„Zentriert“ mit Randangabe links-rechts + runder Rahmen (moderne Browser)


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: 

{{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><!-- Trick damit erstes Listenelement funktioniert: hier kein Inhalt --></span>
* Text 1
* Text 2
* Text 3
}}

ergibt:

(+)(−)
Titel

Siehe auch

Technische Anmerkungen

Mit den optionalen Parametern switcheropen oder switcherclose 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

Wiki-Mechanismus

Normal

div.mw-collapsible[.mw-collapsed]
 └─ div.mw-collapsible-content

Text der bleibt …

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


Mit anderem Klapp-Text (nur HTML 5), wobei der Klick-Schalter immer rechts bleibt. 

div.mw-collapsible[.mw-collapsed]}} & data-expandtext="+" data-collapsetext="–"
 └─ div.mw-collapsible-content

Text der bleibt …

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


Ferngesteuert

· span.mw-customtoggle-myID

div.mw-collapsible mw-collapsed id="mw-customcollapsible-myID"
 └─ div.mw-collapsible-content

Text der bleibt …

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


Mit Benutzung von data-expandtext="…" data-collapsetext="…"

Text der bleibt …

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


Quelle: https://offene-naturfuehrer.de/bflor/Vorlage:Hidden/doc