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: @@
-<span style="
+{{#vardefine:style|}}{{#switch: {{{ Anw | {{{v | {{Anw}} }}} }}}
-	background-color: rgba(0, 0, 0, 0.01);
+	| AV
-	border: 1px solid rgba(0, 0, 0, 0.125);
+	| MDM
-	border-radius: 2px;
+	| MS
-	padding: 3px;
+	| SPDyn
-	-webkit-transition: border 0.3s;
+	| #default={{#if:{{{b|}}}|<span class="ic-beschriftung">{{{b}}}</span><br>}}<span {{#if: {{{va|}}} | style="vertical-align: {{{va|}}};"}}><span
-	transition: border 0.3s;
+		class="
-	-webkit-box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.1) inset;
+		MS ic-eingabe {{{fc|font-color__grau-l}}} {{{class|}}}
-	box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.1) inset;
+		{{#ifeq:{{{2|}}}|cb|ic-eingabe--cb}}
-	color: rgba(0, 0, 0, 0.6);
+		{{#ifeq:{{{3|}}}|cb|ic-eingabe--cb}}
-		clear: both"
+		{{#ifeq:{{{2|}}} | rechts |ic-eingabe--icon--rechts}}
-		><span style="display: inline-block; width: {{{w|170-calc({{#if: {{{2|}}} |12|0}} )px}}};">{{{1}}}</span>{{#switch: {{lc: {{{2|}}} }}
+		{{#if:{{{icon|}}}| ic-eingabe--icon}}
+		"
+		{{#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|}}} }} }}
+		}}
+		{{#if: {{#var:style|}}| style="{{#var:style}} clear: both;"}}
+	| UMA={{#if:{{{b|}}}|<span class="ic-beschriftung {{{b-class|}}}">{{{b}}}</span><br>}}<span {{#if: {{{va|}}} | style="vertical-align: {{{va|}}};"}}><span
+		class="
+		UMA ic-eingabe
+		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={{#if:{{{b|}}}|<span class="ic-beschriftung">{{{b}}}</span><br>}}<span {{#if: {{{va|}}} | style="vertical-align: {{{va|}}};"}}><span
+		class="
+		{{{ Anw | {{{v | {{Anw}} }}} }}} ic-eingabe
+		font-color__grau-l
+		{{#ifeq: {{{2|}}} | dro		| |{{{bc|bc__white}}} }}
+		{{#ifeq: {{{2|}}} | rechts	|ic-eingabe--icon--rechts| {{{2|}}}}} {{#if:{{{iconx|}}}| ic-eingabe--icon}}
+		{{#ifeq: {{#sub:{{{2|}}}	| 0 | 2 }}| tr | {{{2|}}} }}
+		{{#if: {{{icon|}}} | pdl0 }}
+		{{{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;"}}
+	}}
+	><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=[[Datei:Pfeil_Dropdown.png|x5px]]
+			| 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=[[Datei:Counter.png|10px]]
+			| counter={{#switch: {{{ Anw | {{Anw}} }}}
-		}}</span>
+				| MS
+				| MDM
+				| AV=[[Datei:Counter.png|10px|Link=]]
+				| 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 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 -->
+				}}
+			| ip-rechts=<span style="
+				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>