Vorlage:Info: Unterschied zwischen den Versionen

Version vom 18. Dezember 2023, 15:46 Uhr

Information für Interessierte

Syntax: {{ Info | Infotext für Interessierte }}

Erzeugt eine Hover-Blase mit einem Text, wenn man mit der Maus über das gepunktete fährt.

Zusätzlich wird der Hover-Text bei Klick/touch nach rechts expandiert, um eine Anzeige auf Mobilgeräten zu ermöglichen.

Default-Darstellung	Aktion	Darstellung nach Aktion
Infotext für Interessierte	mouse-over	Infotext für Interessierte
Infotext für Interessierte	touch	Infotext für Interessierte Infotext für Interessierte

Parameter	Darstellung
\|class=	css Klasse für das verwendete Icon

In der Mobilansicht wird das Info-Icon zusätzlich verändert: i> bzw. i<

.mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-collapsed::before {
content: '\f129\f105';
font-family: 'Font Awesome 5 Pro';
font-weight: 300;
color: #ec971f;
border-bottom: 1px dotted #ec971f;
border-radius: 0px;
padding-bottom: 1px;
}

und

.mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-expanded::before {
content: '\f129\f104';
font-family: 'Font Awesome 5 Pro';
font-weight: 300;
color: #ec971f;
border-bottom: 1px dotted #ec971f;
border-radius: 0px;
padding-bottom: 1px;
}

Diese Dokumentation befindet sich auf einer eingebundenen Unterseite [ Bearbeiten].
Syntax-Beispiel befindet sich auf der Syntaxseite [Bearbeiten].
Test-/Beispielseite erstellen.
Liste der Unterseiten.

@@ Zeile 1: / Zeile 1: @@
-<span class="info-text" title="{{#replace:{{#replace:{{#replace:{{#replace:{{{1|Information für Interessierte}}}|"|}}|<br>|&#10;}}|</p>|&#10;}}|<p>|}} "
+<noinclude><templatestyles src="Vorlage:Styles.css" /></noinclude><span><div
-><span
+	class="mw-collapsible mw-collapsed true info tolltip {{{class|}}}"
-	class="mw-collapsible mw-collapsed info-collapsed {{{class|}}}"
+	data-expandtext="{{{einblenden|&zwj;}}}"
-	data-expandtext="display:none im css"
+	data-collapsetext="{{{ausblenden|{{#var:hide}} }}}"
-	data-collapsetext="display:none im css"
+	id="mw-customcollapsible-Inhalte"
-	id="mw-customcollapsible-info-collapsed"
+><div class="mw-collapsible-content {{{content-class|}}}">{{{content|{{{1|Information für Interessierte}}} }}}</div></div></span>&emsp;&ensp;<noinclude>
-><span class="mw-collapsible-content {{{content-class|}}}">{{{content|{{{1|Information für Interessierte}}} }}}</span></span></span><noinclude>
 {{Dokumentation}}
 </noinclude>