Quelltext der Seite Vorlage:Hilfe/inputarea

<onlyinclude>{| class="toptextcells hintergrundfarbe-basis" style="width: {{#if: {{{small|}}} | {{{small}}}% | 100%}}; border-radius: 3px; padding: 2px; margin-right:auto; line-height:1em; margin-top: 2px; border: solid {{#if:{{#invoke:TemplUtl|faculty|{{{border|}}}}}| {{#ifeq: {{{typ|0}}} | i | 1 | 2 }}|1}}px #{{#switch:{{{typ|}}}
        |el
        |s
        |p= 0055DD;
        |eld
        |sd
        |d= D11D13;
        |i= 999999; background: var(--background-color-neutral); color:var(--color-base);
        |eli
        |si
        |#default= 999999;
        }}"
|-
|style="width:0;"| {{#switch: {{{typ|}}}
        |el
        |eld
        |eli= {{CodexIcon|linkExternal|px=18|text=externer Link}}
        |s
        |sd
        |si= {{CodexIcon|search|px=18|text=Suche}}
        |#default= }}{{#if: {{{remove|}}} | <span class="skin-invert">{{Menü-Icon| {{{remove}}} |padding=0}}</span>&nbsp;|}}
|{{#if:{{#invoke:TemplUtl|faculty|{{{required|}}}}}| title="Bitte füllen sie dieses Feld aus" style="width:100%;" {{!}} }} {{#if: {{{placeholder|}}}
 | <div style="opacity:.5; white-space:nowrap; overflow:hidden; width:100%;">{{#if:{{{counter|}}}|<span style="float:right;">{{{counter}}}</span> |}}{{{placeholder|}}}</div>
 |{{#if:{{{counter|}}}|<span style="float:right;">{{{counter}}}</span> |}} {{#if:{{#invoke:TemplUtl|faculty|{{{border|}}}}}
   | {{#if: {{{mark|}}}
     | {{Hilfe/mark|{{#tag:nowiki|{{{content|}}}}}|markblau|marker=1}}
     | {{#if:{{#invoke:TemplUtl|faculty|{{{content|}}}}}|{{{content|}}}&#124;|&#124; }}}}
   | {{{content|&nbsp;}}} }}
}}{{#if:{{{rows|}}}
 | {{#switch:{{{rows|}}}
    |2=<br />{{0}}
    |3=<br />{{0}}<br />{{0}}
    |4=<br />{{0}}<br />{{0}}<br />{{0}}
    |5=<br />{{0}}<br />{{0}}<br />{{0}}<br />{{0}}
    |#default=<span class="error">*Parameterfehler: row= min 2 max 5 möglich*</span>}}  }}
|style="text-align:right; width:0;"| {{#if: {{{required|}}}
 | [[Datei:OOjs UI indicator icon required.svg|10px|klasse=skin-invert|alt=|verweis=]]<!-- hat noch kein Codex -->
 |{{#if:{{{expand|}}} |{{CodexIcon|expand|px=14|text=ausklappen}}|}} }}
|}</onlyinclude>

{{Dokumentation/ruler}}
Diese Vorlage fügt auf einer Hilfeseite ein inaktives '''Eingabefeld''' ein, um die unterschiedlichen Optionen darzustellen.

__TOC__

=== Parameter ===
; border
: ''optional'' Dicke der Umrandung in Pixeln; <code>1</code> oder <code>2</code>, Vorgabe <code>1</code> Pixel grau <code>#BBBBBB;</code>
: Nicht für <code>typ=i</code> verwenden
; content
: Vorbelegten / bereits eingegebenen Text darstellen
; counter
: Zählerangabe für Suchen und ersetzen, Eingabeform <code>1 von 7</code>
: oder als Option für ein rechts stehendes Dropdown-Icon innerhalb des Feldes
; expand
: Mit zusätzlichem Dropdownpfeil rechts, nicht in Verbindung mit <code>rows</code> für <code>small</code> oder <code>border</code>
; mark
: den Text im Parameter <code>content</code> markieren (weiß auf blau)
; placeholder
: ''optional'' gibt einen blassgrauen Infotext, falls <code>content=</code>''leer''
; remove
: Eintrag wieder entfernen
; required
: erzeugt ein Sternchen <code>[[Datei:OOjs UI indicator icon required.svg|10px|klasse=skin-invert|alt=|verweis=]]</code>, um anzuzeigen, dass hier eine Eingabe erforderlich ist
; rows
: mehrzeiliges Eingabefeld darstellen, hier die Anzahl der Zeilen (<code>2</code> bis <code>5</code>) eingeben
; small
: Eingabefeld schmaler machen, der Wert sollte zwischen <code>0</code> und <code>100</code> liegen und wird als Prozent interpretiert
; typ
: ändert den Farbwert für die Umrandung und fügt eventuell ein Icon hinzu
: keine Angabe = Standardfeld (grau)
: <code>d</code> = destructive (rot)
: <code>i</code> = inaktiv (disabled, grau)
: <code>el</code> = external link (blau mit Icon externe Verlinkung = {{CodexIcon|linkExternal|px=16|text=externer Link}})
: <code>eld</code> = external link (rot, falscher Wert mit Icon externe Verlinkung = {{CodexIcon|linkExternal|px=16|text=externer Link}})
: <code>eli</code> = external link (grau, Eingabefeld inaktiv mit Icon externe Verlinkung = {{CodexIcon|linkExternal|px=16|text=externer Link}})
: <code>p</code> = progressive (blau)
: <code>s</code> = search (blau mit Suchfeldicon = {{CodexIcon|search|px=16|text=Suche}})
: <code>sd</code> = search (rot, falscher Wert mit Suchfeldicon = {{CodexIcon|search|px=16|text=Suche}})
: <code>si</code> = search (grau, Suchfeld inaktiv mit Suchfeldicon = {{CodexIcon|search|px=16|text=Suche}})

=== Kopiervorlagen – Ausgabeformen ===
; Eingabe erforderlich
: <code><nowiki>{{Hilfe/inputarea |border= |content= |mark= |placeholder= |required= 1 |typ=}}</nowiki></code>
{{Hilfe/inputarea |required=1 |border=2 |content=Vorbelegt |mark=1 |typ=p}}
{{Hilfe/inputarea |required=1 |placeholder=Pflichtangabe erwartet}}
{{Hilfe/inputarea |required=1 |content=Pflichtangabe erfolgt |typ=p}}
{{Hilfe/inputarea |required=1 |border=2 |content=Pflichtangabe erfolgt Feld aktiv |typ=p}}
{{Hilfe/inputarea |required=1 |placeholder=Angabe fehlt |typ=d}}
{{Hilfe/inputarea |required=1 |border=2 |placeholder=Pflichtangabe wurde aktiv gelöscht |typ=d}}


; Feld mit Icon (Suchfeld)
: <code><nowiki>{{Hilfe/inputarea |border= |content= |mark= |placeholder= |typ= s / sd}}</nowiki></code>
{{Hilfe/inputarea |border=2 |content=https://www.example.com |mark=1 |typ=sd}}
{{Hilfe/inputarea |border=2 |content=Wikipedia |mark=1 |typ=s}}
{{Hilfe/inputarea |border=2 |content=Wikip |typ=s}}
{{Hilfe/inputarea |placeholder=Suchbegriff eingeben |typ=s}}
{{Hilfe/inputarea |placeholder=Suchbegriff eingeben |typ=si}}


; Feld mit Icon (externer Link)
: <code><nowiki>{{Hilfe/inputarea |border= |content= |mark= |placeholder= |typ= el / eld}}</nowiki></code>
{{Hilfe/inputarea |border=2 |content=Wikipedia |mark=1 |typ=eld}}
{{Hilfe/inputarea |border=2 |content=https://www.example.com |mark=1 |typ=el}}
{{Hilfe/inputarea |placeholder=Webadresse eingeben |typ=el}}
{{Hilfe/inputarea |placeholder=Webadresse eingeben |typ=eli}}


; Progressive (blau)
: <code><nowiki>{{Hilfe/inputarea |border= |content= |counter= |typ=p}}</nowiki></code>
{{Hilfe/inputarea |typ=p}}
{{Hilfe/inputarea |border=2 |typ=p}}
{{Hilfe/inputarea |border=2 |content=Suchwort |counter=1 von 7 |typ=p}}


; Destructive (rot)
: <code><nowiki>{{Hilfe/inputarea |border= |typ=d}}</nowiki></code>
{{Hilfe/inputarea |typ=d}}
{{Hilfe/inputarea |border=2 |typ=d}}


; Inaktiv (disabled)
: <code><nowiki>{{Hilfe/inputarea |placeholder= |typ=i}}</nowiki></code>
{{Hilfe/inputarea |typ=i}}
{{Hilfe/inputarea |placeholder= Zielseite für die Weiterleitung|typ=i}}


; Auswahl entfernen (remove)
: <code><nowiki>{{Hilfe/inputarea |border= |placeholder= |remove= |typ= }}</nowiki></code>
{{Hilfe/inputarea |placeholder= Eine Kategorie einfügen … |remove= Beispielkategorie}}


; Multiline (rows)
: <code><nowiki>{{Hilfe/inputarea |border= |rows= ‹2–5› |typ=}}</nowiki></code>
{{Hilfe/inputarea |rows=3}}


; Mit Feld zum Ausklappen
: <code><nowiki>{{Hilfe/inputarea |border= |content= |expand= |typ=p}}</nowiki></code>
{{Hilfe/inputarea |expand=1}}
{{Hilfe/inputarea |content=Inhalt ausklappen |expand=1 |typ=p}}
: <code><nowiki>{{Hilfe/inputarea |border= |counter=[[Datei:OOjs UI icon expand.svg|16px|klasse=skin-invert|alt=|verweis=]] |small=60}}</nowiki></code>
{{Hilfe/inputarea |content=Kategorie |counter=[[Datei:OOjs UI icon expand.svg|16px|klasse=skin-invert|alt=|verweis=]] |small=60}}


; Breite einstellen (small)
: <code><nowiki>{{Hilfe/inputarea |border= |typ= |small= ‹1–99›}}</nowiki></code>
{{Hilfe/inputarea |small=1}}{{Hilfe/inputarea |border=2 |typ=p |small=10}}

== Siehe auch ==
* [[Vorlage:Hilfe/ticbox]]
* [[Vorlage:Hilfe/switchbutton]]
* [[Vorlage:MediaWiki-Button]]

[[Kategorie:Vorlage:Formatierungshilfe nicht für Artikel‎|Hilfe/inputarea]]