Vorlage:Button - Versionsgeschichte

Jorka: /* Mehrere Buttons */

2021-09-10T08:58:45Z

Mehrere Buttons

← Nächstältere Version		Version vom 10. September 2021, 08:58 Uhr
Zeile 121:		Zeile 121:
	</div>		</div>

	Auch hier erzeugt <span class="grey"><pre><div class="button-row"> ... </div></pre></span> wieder die Buttonzeile für eine dynamische Anzeige der Buttons. In diesem Fall werden nun 3 Buttons in unterschiedlichen Farben nebeneinander erzeugt. Theoretisch können eine unbegrenzte Anzahl von Buttons nebeneinander dargestellt werden. Für eine mobile Ansicht sollten '''nicht mehr ~~wie~~ drei Buttons''' dargestellt werden.		Auch hier erzeugt <span class="grey"><pre><div class="button-row"> ... </div></pre></span> wieder die Buttonzeile für eine dynamische Anzeige der Buttons. In diesem Fall werden nun 3 Buttons in unterschiedlichen Farben nebeneinander erzeugt. Theoretisch können eine unbegrenzte Anzahl von Buttons nebeneinander dargestellt werden. Für eine mobile Ansicht sollten '''nicht mehr als drei Buttons''' dargestellt werden.

	===Begrenzung der Seitenbreite===		===Begrenzung der Seitenbreite===

Jorka: /* Parameter */

2021-09-10T08:57:35Z

Parameter

← Nächstältere Version		Version vom 10. September 2021, 08:57 Uhr
Zeile 29:		Zeile 29:
	==Parameter==		==Parameter==
	* '''LINK''': (Pflicht) Wiki-Seite oder URL, zu der der Button verlinken soll.		* '''LINK''': (Pflicht) Wiki-Seite oder URL, zu der der Button verlinken soll.
	* '''TEXT''': (Pflicht) Linktext der erscheinen soll		* '''TEXT''': (Pflicht) Linktext, der erscheinen soll.
	* '''ICON''': (Pflicht) Ein Icon von https://icon-sets.iconify.design/ das über dem Linktext dargestellt werden soll. Siehe auch hierzu die [[#Beispiele]]		* '''ICON''': (Pflicht) Ein Icon von https://icon-sets.iconify.design/ das über dem Linktext dargestellt werden soll. Siehe auch hierzu die [[#Beispiele]]
	* '''CLASS''': (Pflicht) Hintergrundfarbe für den Button. Mögliche Werte sind: <span class="blue">blue</span>, <span class="green">green</span>, <span class="red">red</span>, <span class="purple">purple</span>, <span class="yellow">yellow</span>, <span class="grey">grey</span> (Hinweis: Die Angabe eines Farben-Hex-Wertes ist hier nicht möglich.)		* '''CLASS''': (Pflicht) Hintergrundfarbe für den Button. Mögliche Werte sind: <span class="blue">blue</span>, <span class="green">green</span>, <span class="red">red</span>, <span class="purple">purple</span>, <span class="yellow">yellow</span>, <span class="grey">grey</span> (Hinweis: Die Angabe eines Farben-Hex-Wertes ist hier nicht möglich.)

Jorka: /* Beschreibung */

2021-09-10T08:55:42Z

Beschreibung

← Nächstältere Version		Version vom 10. September 2021, 08:55 Uhr
Zeile 23:		Zeile 23:
	Man kann die Darstellung der gesamten Seite zunächst komplett begrenzen. Dazu ist an erster Stelle der Seite folgender Code einzufügen:		Man kann die Darstellung der gesamten Seite zunächst komplett begrenzen. Dazu ist an erster Stelle der Seite folgender Code einzufügen:
	<pre><div style="max-width:960px;"></pre>		<pre><div style="max-width:960px;"></pre>
	Danach ~~erfolgen~~ die Inhalte der Seite. Am Ende der Seite muss der Tag mit <pre></div></pre> geschlossen werden.		Danach folgen die Inhalte der Seite. Am Ende der Seite muss der Tag mit <pre></div></pre> geschlossen werden.

	<pre><div style="max-width:960px;"> ... INHALTE DER SEITE ... </div></pre>		<pre><div style="max-width:960px;"> ... INHALTE DER SEITE ... </div></pre>

Jorka: /* Beschreibung */

2021-09-10T08:55:31Z

Beschreibung

← Nächstältere Version		Version vom 10. September 2021, 08:55 Uhr
Zeile 19:		Zeile 19:
	<pre><div class="button-row"> ... BUTTONS ... </div></pre>		<pre><div class="button-row"> ... BUTTONS ... </div></pre>

	Das dient dazu, dass die Buttons nebeneinander dargestellt werden und sich die Anordnung dynamisch verändert, wenn man mit kleineren Bildschirmen versucht die Seite aufzurufen. Sie hierzu die [[#Beispiele]].		Das dient dazu, dass die Buttons nebeneinander dargestellt werden und sich die Anordnung dynamisch verändert, wenn man mit kleineren Bildschirmen versucht, die Seite aufzurufen. Sie hierzu die [[#Beispiele]].

	Man kann die Darstellung der gesamten Seite zunächst komplett begrenzen. Dazu ist an erster Stelle der Seite folgender Code einzufügen:		Man kann die Darstellung der gesamten Seite zunächst komplett begrenzen. Dazu ist an erster Stelle der Seite folgender Code einzufügen:
	<pre><div style="max-width:960px;"></pre>		<pre><div style="max-width:960px;"></pre>
	Danach erfolgen die Inhalte der Seite. Am Ende der Seite ~~ist~~ der Tag mit <pre></div></pre> geschlossen werden.		Danach erfolgen die Inhalte der Seite. Am Ende der Seite muss der Tag mit <pre></div></pre> geschlossen werden.

	<pre><div style="max-width:960px;"> ... INHALTE DER SEITE ... </div></pre>		<pre><div style="max-width:960px;"> ... INHALTE DER SEITE ... </div></pre>

Cws am 10. September 2021 um 08:17 Uhr

2021-09-10T08:17:23Z

← Nächstältere Version		Version vom 10. September 2021, 08:17 Uhr
Zeile 11:		Zeile 11:
	\|<span class="iconify" data-icon="{{{ICON}}}" data-width="50" data-height="50"></span><br>		\|<span class="iconify" data-icon="{{{ICON}}}" data-width="50" data-height="50"></span><br>
	}}{{{TEXT}}}</span></div>]</div></onlyinclude>		}}{{{TEXT}}}</span></div>]</div></onlyinclude>

			==Beschreibung==
			Mit dieser Vorlage kann man einen Button auf einer Seite erzeugen. Der Button dient vor allem zur besseren Bedienung auf mobilen Endgeräten und bietet ein App-ähnliches Aussehen der Webseite.

			Um mehrere Buttons nebeneinander darzustellen ist die [[#Kopiervorlage]] in folgende Tags einzubinden:

			<pre><div class="button-row"> ... BUTTONS ... </div></pre>

			Das dient dazu, dass die Buttons nebeneinander dargestellt werden und sich die Anordnung dynamisch verändert, wenn man mit kleineren Bildschirmen versucht die Seite aufzurufen. Sie hierzu die [[#Beispiele]].

			Man kann die Darstellung der gesamten Seite zunächst komplett begrenzen. Dazu ist an erster Stelle der Seite folgender Code einzufügen:
			<pre><div style="max-width:960px;"></pre>
			Danach erfolgen die Inhalte der Seite. Am Ende der Seite ist der Tag mit <pre></div></pre> geschlossen werden.

			<pre><div style="max-width:960px;"> ... INHALTE DER SEITE ... </div></pre>

			==Parameter==
			* '''LINK''': (Pflicht) Wiki-Seite oder URL, zu der der Button verlinken soll.
			* '''TEXT''': (Pflicht) Linktext der erscheinen soll
			* '''ICON''': (Pflicht) Ein Icon von https://icon-sets.iconify.design/ das über dem Linktext dargestellt werden soll. Siehe auch hierzu die [[#Beispiele]]
			* '''CLASS''': (Pflicht) Hintergrundfarbe für den Button. Mögliche Werte sind: <span class="blue">blue</span>, <span class="green">green</span>, <span class="red">red</span>, <span class="purple">purple</span>, <span class="yellow">yellow</span>, <span class="grey">grey</span> (Hinweis: Die Angabe eines Farben-Hex-Wertes ist hier nicht möglich.)

			==Kopiervorlage==
			<pre>
			{{Vorlage:Button
			\|LINK=
			\|TEXT=
			\|ICON=
			\|CLASS=
			}}
			</pre>

			==Beispiele==

			===Einzelner Button===
			<pre>
			<div class="button-row">
			{{Vorlage:Button
			\|LINK=Ich will helfen
			\|TEXT=Ich will helfen!
			\|CLASS=blue
			\|ICON=fa-solid:hands-helping
			}}
			</div>
			</pre>

			Wird zu:

			<div class="button-row">
			{{Vorlage:Button
			\|LINK=Ich will helfen
			\|TEXT=Ich will helfen!
			\|CLASS=blue
			\|ICON=fa-solid:hands-helping
			}}
			</div>

			Die <span class="grey"><pre><div class="button-row"> ... </div></pre></span> erzeugt zunächst die Buttonzeile für eine dynamische Anzeige der Buttons. Da die Vorlage nur einmal angewandt wird, wird nur ein Button über die gesamte Breite erzeugt.

			===Mehrere Buttons===
			<pre>
			<div class="button-row">
			{{Vorlage:Button
			\|LINK=A-Z
			\|TEXT=A-Z
			\|CLASS=green
			\|ICON=simple-line-icons:layers
			}}

			{{Vorlage:Button
			\|LINK=Hauptseite:Informationen & Warnungen
			\|TEXT=Informationen & Warnungen
			\|CLASS=purple
			\|ICON=simple-line-icons:info
			}}

			{{Vorlage:Button
			\|LINK=Warum_Wer_Wie
			\|TEXT=Über FLUT <nowiki>[[WIKI]]</nowiki>
			\|CLASS=blue
			\|ICON=fluent:people-team-add-20-regular
			}}
			</div>
			</pre>

			Wird zu:

			<div class="button-row">
			{{Vorlage:Button
			\|LINK=A-Z
			\|TEXT=A-Z
			\|CLASS=green
			\|ICON=simple-line-icons:layers
			}}

			{{Vorlage:Button
			\|LINK=Hauptseite:Informationen & Warnungen
			\|TEXT=Informationen & Warnungen
			\|CLASS=purple
			\|ICON=simple-line-icons:info
			}}

			{{Vorlage:Button
			\|LINK=Warum_Wer_Wie
			\|TEXT=Über FLUT <nowiki>[[WIKI]]</nowiki>
			\|CLASS=blue
			\|ICON=fluent:people-team-add-20-regular
			}}
			</div>

			Auch hier erzeugt <span class="grey"><pre><div class="button-row"> ... </div></pre></span> wieder die Buttonzeile für eine dynamische Anzeige der Buttons. In diesem Fall werden nun 3 Buttons in unterschiedlichen Farben nebeneinander erzeugt. Theoretisch können eine unbegrenzte Anzahl von Buttons nebeneinander dargestellt werden. Für eine mobile Ansicht sollten '''nicht mehr wie drei Buttons''' dargestellt werden.

			===Begrenzung der Seitenbreite===

			<pre>
			<div style="max-width:960px;">
			<div class="button-row">
			{{Vorlage:Button
			\|LINK=A-Z
			\|TEXT=A-Z
			\|CLASS=green
			\|ICON=simple-line-icons:layers
			}}

			{{Vorlage:Button
			\|LINK=Hauptseite:Informationen & Warnungen
			\|TEXT=Informationen & Warnungen
			\|CLASS=purple
			\|ICON=simple-line-icons:info
			}}

			{{Vorlage:Button
			\|LINK=Warum_Wer_Wie
			\|TEXT=Über FLUT <nowiki>[[WIKI]]</nowiki>
			\|CLASS=blue
			\|ICON=fluent:people-team-add-20-regular
			}}
			</div>
			</div>
			</pre>

			Wird zu:

			<div style="max-width:960px;">
			<div class="button-row">
			{{Vorlage:Button
			\|LINK=A-Z
			\|TEXT=A-Z
			\|CLASS=green
			\|ICON=simple-line-icons:layers
			}}

			{{Vorlage:Button
			\|LINK=Hauptseite:Informationen & Warnungen
			\|TEXT=Informationen & Warnungen
			\|CLASS=purple
			\|ICON=simple-line-icons:info
			}}

			{{Vorlage:Button
			\|LINK=Warum_Wer_Wie
			\|TEXT=Über FLUT <nowiki>[[WIKI]]</nowiki>
			\|CLASS=blue
			\|ICON=fluent:people-team-add-20-regular
			}}
			</div>
			</div>

			Die Darstellung entspricht grundsätzlich der Darstellung von [[#Mehrere Buttons]]. Die dargestellte Breite wird jedoch mit <pre><div style="max-width:960px;"></pre> begrenzt (hier: 960px;).

Cws am 10. September 2021 um 07:54 Uhr

2021-09-10T07:54:45Z

← Nächstältere Version		Version vom 10. September 2021, 07:54 Uhr
Zeile 1:		Zeile 1:
	<onlyinclude~~><templatestyles src="Button/styles.css" /~~><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil\|isResourceURL\|1={{{LINK\|{{{1}}}}}}}}		== Darstellung ==
			<onlyinclude><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil\|isResourceURL\|1={{{LINK\|{{{1}}}}}}}}
	\| {{{LINK\|{{{1}}}}}}		\| {{{LINK\|{{{1}}}}}}
	\| {{#ifeq: {{padleft:\|1\|{{{LINK\|{{{1}}}}}}}}\|#		\| {{#ifeq: {{padleft:\|1\|{{{LINK\|{{{1}}}}}}}}\|#

Cws am 2. September 2021 um 12:30 Uhr

2021-09-02T12:30:52Z

← Nächstältere Version		Version vom 2. September 2021, 12:30 Uhr
Zeile 8:		Zeile 8:
	--><div role="button" class="button-style {{{CLASS\|}}}"> <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}		--><div role="button" class="button-style {{{CLASS\|}}}"> <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}
	>{{#if:{{{ICON\|}}}		>{{#if:{{{ICON\|}}}
	\|~~<big>~~<span class="iconify" data-icon="{{{ICON}}}"></span~~></big~~><br>		\|<span class="iconify" data-icon="{{{ICON}}}" data-width="50" data-height="50"></span><br>
	}}{{{TEXT}}}</span></div>]</div></onlyinclude>		}}{{{TEXT}}}</span></div>]</div></onlyinclude>

Cws am 2. September 2021 um 12:29 Uhr

2021-09-02T12:29:02Z

← Nächstältere Version		Version vom 2. September 2021, 12:29 Uhr
Zeile 6:		Zeile 6:
	}}		}}
	}}<!-- link target finished		}}<!-- link target finished
	--><div role="button" class="~~plainlinks~~ {{{CLASS\|}}}"> <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}		--><div role="button" class="button-style {{{CLASS\|}}}"> <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}
	>{{#if:{{{ICON\|}}}		>{{#if:{{{ICON\|}}}
	\|<big><span class="iconify" data-icon="{{{ICON}}}"></span></big><br>		\|<big><span class="iconify" data-icon="{{{ICON}}}"></span></big><br>
	}}{{{TEXT}}}</span></div>]</div></onlyinclude>		}}{{{TEXT}}}</span></div>]</div></onlyinclude>

Cws am 2. September 2021 um 12:28 Uhr

2021-09-02T12:28:27Z

← Nächstältere Version		Version vom 2. September 2021, 12:28 Uhr
Zeile 6:		Zeile 6:
	}}		}}
	}}<!-- link target finished		}}<!-- link target finished
	--><div role="button" class="plainlinks {{{CLASS\|}}}" > <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}		--><div role="button" class="plainlinks {{{CLASS\|}}}"> <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}
	>{{#if:{{{~~Icon~~\|}}}		>{{#if:{{{ICON\|}}}
	\|<big><span class="iconify" data-icon="{{{~~Icon~~}}}"></span></big><br>		\|<big><span class="iconify" data-icon="{{{ICON}}}"></span></big><br>
	}}{{{~~Text~~}}}</span></div>]</div></onlyinclude>		}}{{{TEXT}}}</span></div>]</div></onlyinclude>

Cws am 2. September 2021 um 12:26 Uhr

2021-09-02T12:26:58Z

← Nächstältere Version		Version vom 2. September 2021, 12:26 Uhr
Zeile 1:		Zeile 1:
	<onlyinclude><templatestyles src="Button/styles.css" /><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil\|isResourceURL\|1={{{~~Link~~\|{{{1}}}}}}}}		<onlyinclude><templatestyles src="Button/styles.css" /><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil\|isResourceURL\|1={{{LINK\|{{{1}}}}}}}}
	\| {{{~~Link~~\|{{{1}}}}}}		\| {{{LINK\|{{{1}}}}}}
	\| {{#ifeq: {{padleft:\|1\|{{{~~Link~~\|{{{1}}}}}}}}\|#		\| {{#ifeq: {{padleft:\|1\|{{{LINK\|{{{1}}}}}}}}\|#
	\| {{canonicalurl:{{FULLPAGENAME}}{{{~~Link~~\|{{{1}}}}}}}}		\| {{canonicalurl:{{FULLPAGENAME}}{{{LINK\|{{{1}}}}}}}}
	\| {{canonicalurl:{{{~~Link~~\|{{{1\|{{FULLPAGENAME}}}}}}}}}}		\| {{canonicalurl:{{{LINK\|{{{1\|{{FULLPAGENAME}}}}}}}}}}
	}}		}}
	}}<!-- link target finished		}}<!-- link target finished
	--><div role="button" class="plainlinks {{{~~class~~\|}}}" ~~style="margin:{{{Margin\|.5em}}}; {{#if: {{{Padding\|}}} \| padding-left: {{{Padding}}}; padding-right: {{{Padding}}};"}}~~> <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}		--><div role="button" class="plainlinks {{{CLASS\|}}}" > <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}
	>{{#if:{{{Icon\|}}}		>{{#if:{{{Icon\|}}}
	\|<big><span class="iconify" data-icon="{{{Icon}}}"></span></big><br>		\|<big><span class="iconify" data-icon="{{{Icon}}}"></span></big><br>
	}}{{{Text}}}</span></div>]</div></onlyinclude>		}}{{{Text}}}</span></div>]</div></onlyinclude>

← Nächstältere Version		Version vom 10. September 2021, 07:54 Uhr
Zeile 1:		Zeile 1:
	<onlyinclude~~><templatestyles src="Button/styles.css" /~~><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil\|isResourceURL\|1={{{LINK\|{{{1}}}}}}}}		== Darstellung ==
			<onlyinclude><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil\|isResourceURL\|1={{{LINK\|{{{1}}}}}}}}
	\| {{{LINK\|{{{1}}}}}}		\| {{{LINK\|{{{1}}}}}}
	\| {{#ifeq: {{padleft:\|1\|{{{LINK\|{{{1}}}}}}}}\|#		\| {{#ifeq: {{padleft:\|1\|{{{LINK\|{{{1}}}}}}}}\|#

← Nächstältere Version		Version vom 2. September 2021, 12:26 Uhr
Zeile 1:		Zeile 1:
	<onlyinclude><templatestyles src="Button/styles.css" /><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil\|isResourceURL\|1={{{~~Link~~\|{{{1}}}}}}}}		<onlyinclude><templatestyles src="Button/styles.css" /><div class="button-flex plainlinks">[{{#if: {{#invoke:URLutil\|isResourceURL\|1={{{LINK\|{{{1}}}}}}}}
	\| {{{~~Link~~\|{{{1}}}}}}		\| {{{LINK\|{{{1}}}}}}
	\| {{#ifeq: {{padleft:\|1\|{{{~~Link~~\|{{{1}}}}}}}}\|#		\| {{#ifeq: {{padleft:\|1\|{{{LINK\|{{{1}}}}}}}}\|#
	\| {{canonicalurl:{{FULLPAGENAME}}{{{~~Link~~\|{{{1}}}}}}}}		\| {{canonicalurl:{{FULLPAGENAME}}{{{LINK\|{{{1}}}}}}}}
	\| {{canonicalurl:{{{~~Link~~\|{{{1\|{{FULLPAGENAME}}}}}}}}}}		\| {{canonicalurl:{{{LINK\|{{{1\|{{FULLPAGENAME}}}}}}}}}}
	}}		}}
	}}<!-- link target finished		}}<!-- link target finished
	--><div role="button" class="plainlinks {{{~~class~~\|}}}" ~~style="margin:{{{Margin\|.5em}}}; {{#if: {{{Padding\|}}} \| padding-left: {{{Padding}}}; padding-right: {{{Padding}}};"}}~~> <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}		--><div role="button" class="plainlinks {{{CLASS\|}}}" > <span {{#if:{{{Tooltip\|}}}\|title="{{{Tooltip}}}"}}
	>{{#if:{{{Icon\|}}}		>{{#if:{{{Icon\|}}}
	\|<big><span class="iconify" data-icon="{{{Icon}}}"></span></big><br>		\|<big><span class="iconify" data-icon="{{{Icon}}}"></span></big><br>
	}}{{{Text}}}</span></div>]</div></onlyinclude>		}}{{{Text}}}</span></div>]</div></onlyinclude>