Wechseln zu:Navigation, Suche
Wiki

Vorlage:Einblenden/Doku: Unterschied zwischen den Versionen

Aus Securepoint Wiki
← Zum vorherigen Versionsunterschied
KKeine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(12 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
<p>Um Textabschnitte ein- und ausblenden zu können wird die Klasse ''mw-collapsible'' verwendet.<br>
<templatestyles src="Vorlage:Styles.css" /><p>Um Textabschnitte ein- und ausblenden zu können wird die Klasse ''mw-collapsible'' verwendet.<br>
Die nicht eben intuitiven Parameter werden hier eingängig übersetzt.</p>
Die nicht eben intuitiven Parameter werden hier eingängig übersetzt.</p>
<p>'''Am Ende des ausklappbaren Abschnitts muss unbedingt ein <nowiki></div></nowiki> eingefügt werden!'''</p>
<p>'''Am Ende des ausklappbaren Abschnitts müssen unbedingt <u>zwei</u> div-Tags <u>und</u> ein span-Tag <nowiki></div></div></span></nowiki> eingefügt werden!'''</p>
{| class="wikitable"
{| class="wikitable"
! Parameter !! Default !! Beschreibung
! Parameter !! Wert !! Code / Beschreibung !! Darstellung
|-
|-
| |'''| 1''' <br><small>''| einklappen=''</small> <br><small>''| ausblenden=''</small>|| einklappen || Text, der bei <u>aus</u>geklapptem Text angezeigt wird
| |'''| 1''' <br><small>''| ausklappen=''</small><br><small>''| einblenden=''</small> || <i class=default></i> ausklappen || <nowiki>{{Einblenden}}Darum geht's</div></div></span></nowiki> || {{Einblenden}}Darum geht's</div></div></span>
|-
|-
| |'''| 2''' <br><small>''| ausklappen=''</small><br><small>''| einblenden=''</small> || ausklappen || Text, der bei <u>ein</u>geklapptem Text angezeigt wird
| |'''| 2''' <br><small>''| einklappen=''</small> <br><small>''| ausblenden=''</small> || <i class=default></i> einklappen || <nowiki>{{Einblenden|collapsed=false}}Darum geht's</div></div></span></nowiki> || {{Einblenden| collapsed=false}}Darum geht's</div></div></span>
|-
|-
| |'''| 3''' <br><small>''| collapsed=''</small> || true || true / false: Default-Zustand
| |'''| 3''' <br><small>''| collapsed=''</small> || true || true: Text ausgeblendet (Default-Zustand)<br>false: Text eingeblendet <p>''<nowiki>{{Einblenden| zeig| weg damit | false }}Sofort sichtbar</div></div></span></nowiki>''</p> || {{Einblenden| zeig| weg damit | false}}Sofort sichtbar</div></div></span>
|-
| rowspan="3" | '''| 4''' <br><small>''| layout=''</small> || dezent || <nowiki>{{Einblenden| zeig| weg damit | false | dezent }}Layout ''Dezent''</div></div></span></nowiki> || {{Einblenden| zeig| weg damit | false | dezent }}Layout ''Dezent''</div></div></span>
|-
|| bigdezent || <nowiki>{{Einblenden| zeig| weg damit | false | bigdezent }}Layout ''bigdezent''</div></div></span></nowiki> || {{Einblenden| zeig| weg damit | false | bigdezent }}Layout ''bigdezent''</div></div></span>
 
|-
|| tolltip || Zeigt den Inhalt bereits beim Hovern als schwebendes Fesnter an. Klicken trotzdem möglich. Erlaubt umfangreiches HTML-Layout als Hovertext.<nowiki>{{Einblenden| zeig| weg damit | true | dezent tolltip}}Layout ''dezent tolltip''</div></div></span></nowiki> || {{Einblenden| zeig| weg damit |true | dezent tolltip }}Layout ''dezent tolltip''</div></div></span>
 
|-
| rowspan=8 | '''| icon=''' || info || <nowiki>{{Einblenden| layout=dezent | icon=info}}''info''</div></div></span></nowiki> || {{Einblenden| layout=dezent | icon=info }}''info''</div></div></span>
|-
| lightbulb || <nowiki>{{Einblenden| layout=dezent | icon=lightbulb}}''lightbulb''</div></div></span></nowiki> || {{Einblenden| layout=dezent | icon=lightbulb }}''lightbulb''</div></div></span>
|-
| thinking || <nowiki>{{Einblenden| layout=dezent | icon=thinking}}''thinking''</div></div></span></nowiki> || {{Einblenden| layout=dezent | icon=thinking }}''thinking''</div></div></span>
|-
| code || <nowiki>{{Einblenden| layout=dezent | icon=code}}''code''</div></div></span></nowiki> || {{Einblenden| layout=dezent | icon=code }}''code''</div></div></span>
|-
| gear || <nowiki>{{Einblenden| layout=dezent | icon=gear}}''gear''</div></div></span></nowiki> || {{Einblenden| layout=dezent | icon=gear }}''gear''</div></div></span>
|-
| bug || style="vertical-align: bottom;" | Funktioniert zwar, sollte aber nur mit der Vorlage <nowiki>{{info|…}}</nowiki> verwendet werden<br><nowiki>{{Einblenden| layout=dezent | icon=bug}}''bug''</div></div></span></nowiki> || {{Einblenden| layout=dezent | icon=bug | collapsed=false}}''bug''</div></div></span>
|-
| menu || <u>Nur für Startseiten</u> oder für die <u>Vorlage <nowiki>{{info|…}}</nowiki></u>
| class=startbox-demo | {{Einblenden| layout=dezent | icon=menu }}''menu''</div></div></span>
|-
| changelog || Wird in der Vorlage <nowiki>{{Header | vorher=…}}</nowiki> verwendet<br> || {{Einblenden| Vorhergehende Änderungen… | layout=dezent | icon=changelog }}''changelog''</div></div></span>
 
|-
| |'''| id''' || ''Null'' || {{code|<nowiki>id=2</nowiki>}} → <nowiki>id="mw-customcollapsible-Inhalte2"</nowiki><br>Um den Bereich, der eingeblendet oder ausgeblendet werden soll eindeutig zu identifizieren wird das tag ''<nowiki>id="mw-customcollapsible-Inhalte"</nowiki>'' verwendet.<br>Soll nun ein ausklappbarer Bereich verschachtelt werden, muss der zweite Bereich mit ''<nowiki>id="mw-customcollapsible-Inhalte2"</nowiki>'' getagt werden. Das verhindert ein ungewolltes Einblenden der Verschachtelung. ||
|-
| |'''| Vorschau'''=  || || blendet ein Vorschaubildchen rechts vom Toggle-Text ein.
* table-check.png <span class="Vorschaubild">[[Datei:table-check.png]]</span>
* step-by-step.png <span class="Vorschaubild">[[Datei:step-by-step.png]]</span>
* Step-by-Step-2025.png <span class="Vorschaubild">[[Datei:Step-by-Step-2025.png]]</span>
* Step-by-Step-2025-2.png <span class="Vorschaubild">[[Datei:Step-by-Step-2025-2.png]]</span>
| {{Einblenden| zeig| weg damit | true | dezent | Vorschau=table-check.png }} Tabelle </div></div></span>
<br><br> {{Einblenden| zeig| weg damit | true | dezent | Vorschau=step-by-step.png }} Schritt für Schritt </div></div></span>
<br><br> {{Einblenden| zeig| weg damit | true | dezent | Vorschau=Step-by-Step-2025.png }} Schritt für Schritt 2025 </div></div></span>
<br><br> {{Einblenden| zeig| weg damit | true | dezent | Vorschau=Step-by-Step-2025-2.png }} Schritt für Schritt 2025-2 </div></div></span>
|-
| |'''| class-content=''' ||  || css Klasse, die auf den Contentbereich wirkt.<br> z.B.: ''grid'' um Text neben großen Bildern anzeigen zu lassen
|-
| |'''| css=''' || || beliebiges css, das auf die Vorlage wirkt
|}
|}

Aktuelle Version vom 21. Januar 2026, 14:10 Uhr

Um Textabschnitte ein- und ausblenden zu können wird die Klasse mw-collapsible verwendet.
Die nicht eben intuitiven Parameter werden hier eingängig übersetzt.

Am Ende des ausklappbaren Abschnitts müssen unbedingt zwei div-Tags und ein span-Tag </div></div></span> eingefügt werden!

Parameter Wert Code / Beschreibung Darstellung
| 1
| ausklappen=
| einblenden=		 ausklappen {{Einblenden}}Darum geht's</div></div></span>
Darum geht's
| 2
| einklappen=
| ausblenden=		 einklappen {{Einblenden|collapsed=false}}Darum geht's</div></div></span>
Darum geht's
| 3
| collapsed=		 true true: Text ausgeblendet (Default-Zustand)
false: Text eingeblendet

{{Einblenden| zeig| weg damit | false }}Sofort sichtbar</div></div></span>
Sofort sichtbar
| 4
| layout=		 dezent {{Einblenden| zeig| weg damit | false | dezent }}Layout ''Dezent''</div></div></span>
Layout Dezent
bigdezent {{Einblenden| zeig| weg damit | false | bigdezent }}Layout ''bigdezent''</div></div></span>
Layout bigdezent
tolltip Zeigt den Inhalt bereits beim Hovern als schwebendes Fesnter an. Klicken trotzdem möglich. Erlaubt umfangreiches HTML-Layout als Hovertext.{{Einblenden| zeig| weg damit | true | dezent tolltip}}Layout ''dezent tolltip''</div></div></span>
Layout dezent tolltip
| icon= info {{Einblenden| layout=dezent | icon=info}}''info''</div></div></span>
info
lightbulb {{Einblenden| layout=dezent | icon=lightbulb}}''lightbulb''</div></div></span>
lightbulb
thinking {{Einblenden| layout=dezent | icon=thinking}}''thinking''</div></div></span>
thinking
code {{Einblenden| layout=dezent | icon=code}}''code''</div></div></span>
code
gear {{Einblenden| layout=dezent | icon=gear}}''gear''</div></div></span>
gear
bug Funktioniert zwar, sollte aber nur mit der Vorlage {{info|…}} verwendet werden
{{Einblenden| layout=dezent | icon=bug}}''bug''</div></div></span>
bug
menu Nur für Startseiten oder für die Vorlage {{info|…}}
changelog Wird in der Vorlage {{Header | vorher=…}} verwendet
changelog
| id Null id=2 → id="mw-customcollapsible-Inhalte2"
Um den Bereich, der eingeblendet oder ausgeblendet werden soll eindeutig zu identifizieren wird das tag id="mw-customcollapsible-Inhalte" verwendet.
Soll nun ein ausklappbarer Bereich verschachtelt werden, muss der zweite Bereich mit id="mw-customcollapsible-Inhalte2" getagt werden. Das verhindert ein ungewolltes Einblenden der Verschachtelung.
| Vorschau= blendet ein Vorschaubildchen rechts vom Toggle-Text ein.





1. 2. 3.
Abb.1 Abb.2 Abb.3
Abbildungen
Tabelle






1. 2. 3.
Abb.1 Abb.2 Abb.3
Abbildungen
Schritt für Schritt






1. 2. 3.
Abb.1 Abb.2 Abb.3
Abbildungen
Schritt für Schritt 2025






1. 2. 3.
Abb.1 Abb.2 Abb.3
Abbildungen
Schritt für Schritt 2025-2
| class-content= css Klasse, die auf den Contentbereich wirkt.
z.B.: grid um Text neben großen Bildern anzeigen zu lassen
| css= beliebiges css, das auf die Vorlage wirkt
Abgerufen von „https://wiki.securepoint.de/index.php?title=Vorlage:Einblenden/Doku&oldid=100323“