Vorlage:Ic: Unterschied zwischen den Versionen

Aktuelle Version vom 10. Juli 2024, 16:03 Uhr

Syntax: {{ ic | Input-Cloud | Optionale Parameter }}

2. Parameter	Default	Darstellung
\| dr als 2. Parameter	w=161px dropdown	Input-Cloud
\| dr \| Anw=UMA als 2. Parameter	w=161px dropdown	Input-Cloud
\| c als 2. Parameter	w=161px counter	Input-Cloud
\| c als 2. Parameter Bei Aufruf von einer UTM-Seite aus	w=81px	Input-UTM
\| rechts	links	stellt ein Icon auf der Rechten Seite dar
\| tr als 2. Parameter Bei Aufruf von einer UTM-Seite aus	w=161px table-row	Input-Cloud
\| tr-odd als 2. Parameter Bei Aufruf von einer UTM-Seite aus	w=161px table-row	Input-Cloud
\| tr-even als 2. Parameter Bei Aufruf von einer UTM-Seite aus	w=161px table-row	Input-Cloud
\| tr-head als 2. Parameter Bei Aufruf von einer UTM-Seite aus	w=161px table-row	Input-Cloud
\| cb \| Anw=UMA als 2. oder 3. Parameter	zusätzlich als Inhalt: {{cb\|https}} clickbox	»https
2. oder weitere Parameter	Default	Darstellung
\| Anw=	ohne	Formatiert die Anzeige, wie mit Aufruf von Anw-Seite aus
\| Anw=UTM		Eingabfeld UTM
\| Anw=UMA		Eingabfeld UMA
\| Anw=MS		Eingabfeld UMA
\| w=	w=170px width:	Input-Cloud
\| fw=	fw=normal font-weight	light, lighter, normal, bold, bolder
\| icon=	Optional {{ spc \| Eingabefeld \| c \| icon=clock \| fw=bold }}	Eingabefeld
\| icon= \| Anw=MS	Optional {{ spc \| Eingabefeld \| c \| icon=clock \| fw=bold }}	Eingabefeld
\| iconw=	20px	Breite des Iconfeldes
\| iconc=	grey-l	Farbe des Icons
\| icon-class=	Übergibt den Parameter als class=xyz an {{spc\|}} fas=solid (entspr. bold), far=regular, fal=light Um ein beliebiges fontawesome-Icon zu verwenden muss als Paramater zusätzlich icon=fa verwendet werden.
\| lh=	Optional line-height	lh=40px verändert die Zeilenhöhe außerhalb* der Box*
\| pd=	pd=3px	ändert die Höhe der Box: Input-Cloud pd=10px
\| c= Color	grey-l
\| bdc= Border-Color	rgba(0, 0, 0, 0.125)
\| bc= background-color	rgba(0, 0, 0, 0.01)

Diese Dokumentation befindet sich auf einer eingebundenen Unterseite [ Bearbeiten].
Syntax-Beispiel befindet sich auf der Syntaxseite [Bearbeiten].
Anwendungsbeispiele und Funktionalitätsprüfungen befinden sich auf der Testseite [Bearbeiten].
Liste der Unterseiten.

@@ Zeile 1: / Zeile 1: @@
-{{#switch:
+{{#vardefine:style|}}{{#switch: {{{ Anw | {{{v | {{Anw}} }}} }}}
-	{{{ Anw | {{{v |	{{#switch: {{#titleparts: {{FULLPAGENAMEE}} | 1 | 1 }}
-							| Spielwiese={{#titleparts: {{FULLPAGENAMEE}} | 1 | 2 }}
-							| #default={{#titleparts: {{FULLPAGENAMEE}} | 1 | 1 }}
-						}}
-			 }}}
-	}}}
 	| AV
 	| MDM
 	| MS
-	| #default=<span style="vertical-align: {{{va|}}};"><span style="
+	| SPDyn
-		background-color: {{ Farbe | {{{bc|rgba(0, 0, 0, 0.01);}}} }}
+	| #default={{#if:{{{b|}}}|<span class="ic-beschriftung">{{{b}}}</span><br>}}<span {{#if: {{{va|}}} | style="vertical-align: {{{va|}}};"}}><span
-		border: 1px solid {{ Farbe | {{{bdc|rgba(0, 0, 0, 0.125);}}} }}
+		class="
-		border-radius: 2px;
+		MS ic-eingabe {{{fc|font-color__grau-l}}} {{{class|}}}
-		padding: {{{pd|3px}}};
+		{{#ifeq:{{{2|}}}|cb|ic-eingabe--cb}}
-		{{#if: {{{icon|}}} | padding-left: 0px; | }}
+		{{#ifeq:{{{3|}}}|cb|ic-eingabe--cb}}
-		{{#ifeq:  {{{2|}}} | rechts | padding-left: 3px; padding-right: 0px; }}
+		{{#ifeq:{{{2|}}} | rechts |ic-eingabe--icon--rechts}}
-		-webkit-transition: border 0.3s;
+		{{#if:{{{icon|}}}| ic-eingabe--icon}}
-		transition: border 0.3s;
+		"
-		-webkit-box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.1) inset;
+		{{#vardefine:style|
-		box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.1) inset;
+		{{#if: {{{bc|}}}  | background-color: {{Farbe|{{{bc|rgba(0,0,0,0.01);}}} }} }}
-		line-height: {{{lh|}}};
+		{{#if: {{{bdc|}}} | border: 1px solid {{Farbe|{{{bdc|rgba(0,0,0,0.125);}}} }} }}
-		font-weight: {{{fw|normal}}};
+		{{#if: {{{pd|}}}  | padding: {{{pd|}}}; }}
-		color: {{Farbe|{{{c|grey-l}}} }}
+		{{#if: {{{lh|}}} | line-height: {{{lh|}}}; }}
-		clear: both;
+		{{#if: {{{fw|}}} | font-weight: {{{fw|}}}; }}
-		display:inline-block;
+		{{#if: {{{c |}}} | color: {{Farbe|{{{c|}}} }} }}
- 		vertical-align: top;
+		}}
-		margin: 3px; 0px;"
+		{{#if: {{#var:style|}}| style="{{#var:style}} clear: both;"}}
-	| UMA=<span style="vertical-align: {{{v}}};"><span style="background-color: rgb(255, 255, 255);;
+	| UMA={{#if:{{{b|}}}|<span class="ic-beschriftung {{{b-class|}}}">{{{b}}}</span><br>}}<span {{#if: {{{va|}}} | style="vertical-align: {{{va|}}};"}}><span
-		border: 1px solid rgb(182, 182, 182);
+		class="
-		padding: {{{pd|3px}}};
+		UMA ic-eingabe
-		clear: both;"
+		font-color__grau-l
+		{{{2|}}}
+		{{{3|}}} {{{class|}}}
+		"
+		{{#vardefine:style|
+		{{#if: {{{bc|}}}  | background-color: {{Farbe|{{{bc|rgba(0,0,0,0.01);}}} }} }}
+		{{#if: {{{bdc|}}} | border: 1px solid {{Farbe|{{{bdc|rgba(0,0,0,0.125);}}} }} }}
+		{{#if: {{{pd|}}}  | padding: {{{pd|}}}; }}
+		{{#if: {{{lh|}}} | line-height: {{{lh|}}}; }}
+		{{#if: {{{fw|}}} | font-weight: {{{fw|}}}; }}
+		{{#if: {{{c |}}} | color: {{Farbe|{{{c|}}} }} }}
+		}}
+		{{ifeq: {{#var:style|}}|| style="{{#var:style}} clear: both;"}}
+	| AWP={{#if:{{{b|}}}|<span class="AWP ic-beschriftung {{{b-class|}}}">{{{b}}}</span><br>}}<span {{#if: {{{va|}}} | style="vertical-align: {{{va|}}};"}}><span
+		class="
+		AWP ic-eingabe
+		font-color__{{#if:||{{{c|grau-l}}} }}
+		{{#if: {{{bdc|}}} | border-color__{{{bdc|}}} }}
+		{{{2|}}}
+		{{{3|}}} {{{class|}}}
+		"
+		{{#vardefine:style|
+		{{#if: {{{bc|}}}  | background-color: {{Farbe|{{{bc|rgba(0,0,0,0.01);}}} }} }}
+		{{#if: {{{pd|}}}  | padding: {{{pd|}}}; }}
+		{{#if: {{{lh|}}} | line-height: {{{lh|}}}; }}
+		{{#if: {{{fw|}}} | font-weight: {{{fw|}}}; }}
+		}}
+		{{ifeq: {{#var:style|}}|| style="{{#var:style}} clear: both;"}}
+	| SUB={{#if:{{{b|}}}|<span class="ic-beschriftung">{{{b}}}</span><br>}}<span {{#if: {{{va|}}} | style="vertical-align: {{{va|}}};"}}><span
+		class="
+		SUB ic-eingabe
+		font-color__grau-l
+		bc__white
+		{{{2|}}}
+		{{{3|}}} {{{class|}}}
+		"
+		{{#vardefine:style|
+		{{#if: {{{bc|}}}  | background-color: {{Farbe|{{{bc|rgba(0,0,0,0.01);}}} }} }}
+		{{#if: {{{bdc|}}} | border: 1px solid {{Farbe|{{{bdc|rgba(0,0,0,0.125);}}} }} }}
+		{{#if: {{{pd|}}}  | padding: {{{pd|}}}; }}
+		{{#if: {{{lh|}}} | line-height: {{{lh|}}}; }}
+		{{#if: {{{fw|}}} | font-weight: {{{fw|}}}; }}
+		{{#if: {{{c |}}} | color: {{Farbe|{{{c|}}} }} }}
+		}}
+		{{ifeq: {{#var:style|}}|| style="{{#var:style}} clear: both;"}}
+	| MAC
 	| U
-	| UTM=<span style="vertical-align: {{{v}}};"><span style="
+	| UTM={{#if:{{{b|}}}|<span class="ic-beschriftung">{{{b}}}</span><br>}}<span {{#if: {{{va|}}} | style="vertical-align: {{{va|}}};"}}><span
-		background-color: rgb(255, 255, 255);;
+		class="
-		border: 1px solid rgb(182, 182, 182);
+		{{{ Anw | {{{v | {{Anw}} }}} }}} ic-eingabe
-		border-radius: 3px;
+		font-color__grau-l
-		padding: {{{pd|3px}}};
+		{{#ifeq: {{{2|}}} | dro		| |{{{bc|bc__white}}} }}
-		{{#if: {{{icon|}}} | padding-left: 0px; | }}
+		{{#ifeq: {{{2|}}} | rechts	|ic-eingabe--icon--rechts| {{{2|}}}}} {{#if:{{{iconx|}}}| ic-eingabe--icon}}
-		{{#ifeq:  {{{2|}}} | rechts | padding-left: 3px; padding-right: 0px;}}
+		{{#ifeq: {{#sub:{{{2|}}}	| 0 | 2 }}| tr | {{{2|}}} }}
-		{{#ifeq:  {{{2|}}} | c | border-right: 0px; padding-right: 0px;}}
+		{{#if: {{{icon|}}} | pdl0 }}
-		{{#ifeq:  {{{2|}}} | counter | border-right: 0px; padding-right: 0px;}}
+		{{{3|}}} {{{class|}}}
-		-webkit-transition: border 0.3s;
+		"
-		transition: border 0.3s;
+		{{#vardefine:style|
-		x-webkit-box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.1) inset;
+		{{#if: {{{bc |}}} | background-color:	{{Farbe|{{{bc|rgba(0,0,0,0.01);}}} }} }}
-		xbox-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.1) inset;
+		{{#if: {{{bdc|}}} | border:		1px solid {{Farbe|{{{bdc|rgba(0,0,0,0.125);}}} }} }}
-		line-height: {{{lh|}}};
+		{{#if: {{{pd |}}} | padding:		{{{pd|}}}; }}
-		font-weight: {{{fw|normal}}};
+		{{#if: {{{lh |}}} | line-height:	{{{lh|}}}; }}
-		color: {{Farbe|grey-l}}
+		{{#if: {{{fw |}}} | font-weight:	{{{fw|}}}; }}
-		clear: both"
+		{{#if: {{{c  |}}} | color:		{{Farbe|{{{c|}}} }} }}
+		}}
+		{{ifeq: {{#var:style|}}|| style="{{#var:style}} clear: both;"}}
 	}}
->{{#if: {{{icon|}}} |{{#ifeq: {{{2|}}} | rechts | |<span style="display:inline-block; width: {{{iconw|20px}}}; text-align: center; color: {{ Farbe | {{{iconc|grey-l}}} }} border-right: 1px solid  rgba(0, 0, 0, 0.125); background-color: white; padding: 1px;">{{spc|{{{icon|}}}|o|-}}</span>&nbsp; |}} }}<span style="display: inline-block; width: calc( {{{ w | {{isutm | 90px | 170px | {{{Anw|}}} }} }}} - {{#if: {{{2|}}} |9px|0px}} );">{{{1}}}</span>{{#switch: {{lc: {{{2|}}} }}
+	><span class="inner-block {{{class-inner-block|{{#ifeq:{{{2|}}}|ip-rechts|right}} }}}><span class=inner-block__left>{{#if: {{{icon|}}} |{{#ifeq: {{{2|}}} | rechts | |<span
+		class="icon {{{icon-span-class|}}}"
+		style="
+		{{#if: {{{iconw|}}}  	| width: {{{iconw|}}}; display: inline-block;}}
+		{{#if: {{{iconc|}}} 	| color: {{Farbe| {{{iconc|}}} }} }}
+		{{#if: {{{iconbc|}}}	| background-color: {{Farbe | {{{iconbc|}}} }} }}
+		{{#if:{{{iconborder|}}} | border-right: {{{iconborder|}}} }}
+		"
+	>{{spc|{{#ifeq:{{{2|}}}|ip-rechts|/---&emsp;}}{{{icon|}}}|o|-| class={{{icon-class|}}} }} </span>|}} }}<!--folgender span hatte mal class="pd5" --><span class=inner-block__right style="
+		{{#ifeq: {{{w|"x"}}} | "x"
+			|
+			| <!-- display: inline-flex; -->
+			width: calc( {{{ w | {{isutm | 90px | 170px | {{{Anw|}}} }} }}} - {{#if: {{{2|}}} |calc( 1em + 3px )|0px}} );
+		}}"
+	>{{#ifeq:{{{1| }}}| |&emsp;&emsp;&emsp;|{{{1}}} }}</span></span>{{#switch: {{lc: {{{2|}}} }}
+			| icon-r
 			| dr
-			| dropdown=<i class="fas fa-caret-down"></i> <!-- [[Datei:Pfeil_Dropdown.png|x5px|Link=]] -->
+			| dropdown={{#switch: {{{Anw|{{Anw}}}}}
+				| SUB
+				| UMA=<span class="dr-icon"></span>
+				| #default=<i class="{{{icon-r|fas fa-caret-down}}} middle right ml-2"></i><!--
+				  	[[Datei:Pfeil_Dropdown.png|x5px|Link=]] --> }}
+			| dr-b=<span class="dr-b"><i style="margin-left: 2px;" class="fas fa-angle-down right"></i></span>
+			| dro=<i class="far fa-angle-down middle right pd4"></i><!-- ml-2 -->
 			| c
-			| counter={{#switch:
+			| counter={{#switch: {{{ Anw | {{Anw}} }}}
-				{{{ Anw | {{{v |	{{#switch: {{#titleparts: {{FULLPAGENAMEE}} | 1 | 1 }}
+				| MS
-							| Spielwiese={{#titleparts: {{FULLPAGENAMEE}} | 1 | 2 }}
-							| #default={{#titleparts: {{FULLPAGENAMEE}} | 1 | 1 }}
-						}}
-					 }}}
-				}}}
-				| AV
 				| MDM
-				| MS
+				| AV=[[Datei:Counter.png|10px|Link=]]
-				| #default=<span style="position: absolute;"><sup>▴</sup></span><sub>▾</sub> <!-- [[Datei:Counter.png|10px|Link=]] alte Version -->
+				| MAC=<span style="
+					background: {{Farbe|macos-blau}};
+					display: inline-block;
+					border-radius: 0px 2px 2px 0px;
+				"><span style="
+					font-size: {{{fs|1em}}}; /*{{{fs|11px}}};*/
+					color: white;
+					display: inline-flex;
+					width: {{{w|15px}}};
+					position: relative;
+					top: -5px;
+					/*left: 2px; 5px;
+					margin-left: 0px;
+					margin-right: 2px;*/
+				">{{spc|fa|o|-|class=fas fa-angle-up}}<span style="
+					position: relative;
+					left: -17px; /*-7px;*/
+					top: 7px;
+					font-size: {{{fs|1em}}}; /*{{{fs|11px}}};*/
+				">{{spc|fa|o|-|class=fas fa-angle-down}}</span></span></span>
 				| U
-				| UTM=<span style="vertical-align: 1px">[[Datei:UTM_v11-8-2_Counter.png|15px|Link=]]</span>
+				| UTM=<span class="counter-icon">[[Datei:UTM_v11-8-2_Counter.png|15px|Link=]]</span>
+				| AWP=<span class="counter"><i class="fas fa-caret-down"></i><i class="fas fa-caret-up"></i></span>
+				| #default=<span style="position: absolute;"><sup>▴</sup></span><sub>▾</sub> <!--
+			 		[[Datei:Counter.png|10px|Link=]] alte Version -->
 				}}
-			| rechts=<span style="display:inline-block; width: {{{iconw|20px}}}; text-align: center; color: {{ Farbe | {{{iconc|grey-l}}} }} border-left: 1px solid  rgba(0, 0, 0, 0.125); background-color: white; padding: 1px;">{{spc|{{{icon|}}}|o|-}}</span>
+			| ip-rechts=<span style="
-		}}</span></span><noinclude>
+				display:			inline-block;
+				width:				x;
+				text-align: 		center;
+				color:				{{ Farbe |  {{{iconc|grey-l}}} }}
+				border-left: 		{{{iconborder|1px solid  rgba(0, 0, 0, 0.125)}}};
+				background-color:	{{Farbe | hgrau }}
+				padding: 			1px;
+				float:				right;
+			">{{spc|{{{icon|/---&emsp;}}}|o|-|{{#if:{{{icon-class}}}|class={{{icon-class}}}}}| {{#if:{{{icon|}}}|w=30px}}}}</span>
+			| rechts=<span style="
+				display:			inline-block;
+				width:				{{{iconw|30px}}};
+				text-align: 		center;
+				color:				{{ Farbe | {{{iconc|grey-l}}} }}
+				border-left: 		{{{iconborder|1px solid  rgba(0, 0, 0, 0.125)}}};
+				background-color:	{{Farbe | {{{iconbc|white;}}} }}
+				padding: 			1px;
+				float:				right;
+			">{{spc|{{{icon|}}}|o|-|{{#if:{{{icon-class}}}|class={{{icon-class}}}}}| {{#if:{{{icon|}}}|w=30px}}}}</span>
+		}}</span></span></span><noinclude>
 {{Dokumentation}}
 </noinclude>