Quelltext der Seite Vorlage:Hilfe/dialog

<onlyinclude>{{#if: {{{noframe|}}} ||<div class="hintergrundfarbe2" style="border: 1px solid #BBBBBB; border-radius: 3px; font-size: 90%; width: {{#if: {{{width|}}} |{{{width|}}} |380}}px; padding: .2em 0;">}}
{| style="width: 100%;"
|-
| {{#if: {{{label-1|}}} |style="width:90px;"{{!}}<div {{#if: {{{mobile|}}} | |class="mw-ui-button }} {{#switch: {{{1}}}
  |b=" style="color:#3366CC;
  |i=" style="background:#BBBBBB; color:#FFFFFF;
  |l=" style="color:#DD3333;
  |p=mw-ui-progressive" style="
  |#default=" style="}}padding: 2px 4px;">{{#if: {{{mobile|}}} |'''{{{label-1}}}''' |{{{label-1}}}}}</div>| }}
! {{#if: {{{label-1|}}} | {{{label-t|}}} |style="font-weight:normal; text-align:left;"{{!}} {{{label-t|}}} }}
| {{#if: {{{label-2|}}} |style="float:right;"{{!}} <div {{#if: {{{mobile|}}} | |class="mw-ui-button }} {{#switch: {{{2}}}
  |b=" style="color:#3366CC;
  |i=" style="background:#BBBBBB; color:#FFFFFF;
  |l=" style="color:#DD3333;
  |p=mw-ui-progressive" style="
  |#default=" style="}}padding: 2px 4px;">{{#if: {{{mobile|}}} |'''{{{label-2}}}''' |{{{label-2}}}}}</div> |style="width:30%;"{{!}} }}
|}
{{#if: {{{content|}}} |{{#if: {{{line|}}} |<hr /> | }}<div style="padding: .5em;">{{{content}}}</div> | }}{{#if: {{{label-3|}}} |{{#if: {{{line|}}} |<hr /> | }}<div {{#if: {{{mobile|}}} | |class="mw-ui-button}} {{#switch: {{{3}}}
  |b=" style="color:#3366CC;
  |i=" style="background:#BBBBBB; color:#FFFFFF;
  |l=" style="color:#DD3333;
  |p=mw-ui-progressive" style="
  |#default=" style="}}padding: 2px 4px; margin: 4px;">{{#if: {{{mobile|}}} |'''{{{label-3}}}''' |{{{label-3}}}}}</div>| }}{{#if: {{{noframe|}}} | |</div>}}</onlyinclude>

{{Dokumentation/ruler}}
Diese kleine Vorlage dient in ersten Linie der Erstellung von Dialogfeldern mit ein, zwei oder drei Buttons zur Simulation auf Seiten, die die Funktionen des [[Hilfe:VisualEditor|VisualEditors]] beschreiben.

== Parameter ==
; 1 2 3
Typ für Button 1 bis 3
: <code>1</code> oder leer = schwarz auf weiß
: <code>b</code> = blau auf weiß
: <code>i</code> = inaktiv, weiß auf grau
: <code>l</code> = rot auf weiß
: <code>p</code> = progressive, weiß auf blau
; content
: Inhalt des Dialogfeldes darf keine Tabellen enthalten falls notwendig muss <code>noframe</code> einen Inhalt haben um den Rahmen abzuschalten
; label-1
: Text für Button 1
; label-2
: Text für Button 2
;label-3
: Text für Button 3
; label-t
: Dialogfeldtitel, geeignet für die Einbindung von {{Vorlage|Hilfe:VisualEditor/!toolitem}} oder internationalisierten Titeln
;line
: kann eine Trennlinie ober- oder unterhalb des Bereiches <code>content</code> erzeugen
; mobile
: Umrandung für die Schaltflächen ausblenden
; [[#noframe|noframe]]
: Inhalte mit Tabellen können nicht im Parameter <code>content</code> dargestellt werden, noframe deaktiviert den Rahmen, dieser muss manuell gesetzt werden.
: Die Buttons 1 und 2 oder 3 können dann einzeln gesetzt werden.
; width
: Breite einstellen, numerische Angabe in px, Vorgabe 380px

== Kopiervorlagen ==
<code><nowiki>{{Hilfe/dialog|1= |2= |3= |label-t= |label-1= |label-2= |label-3= |line= |noframe= |width= |content=}}</nowiki></code>

=== Beispiele ===
Grundform drei Buttons mit Inhalt<br />
<code><nowiki>{{Hilfe/dialog|3=l |label-t=Dialogtitel |label-1=Abbrechen |label-2=Weiter |label-3=Löschen |line=1 |content=Inhalt}}</nowiki></code>
{{Hilfe/dialog|3=l |label-t=Dialogtitel |label-1=Abbrechen |label-2=Weiter |label-3=Löschen |line=1 |content=Inhalt}}

Anzeige für Mobilgeräte<br />
{{Hilfe/dialog|3=l |2=b |label-t=Dialogtitel |label-1=[[Datei:OOjs UI icon move-rtl.svg|16px|verweis=]] |label-2=Speichern |label-3=Löschen |line=1 |mobile=1 |content=Inhalt}}

Button 2 inaktiv, mit Inhalt, ohne Button 3, Breite 450px<br />
<code><nowiki>{{Hilfe/dialog |2=i |label-t=Dialogtitel |label-1=Zurück |label-2=Fertig |width=450 |line=1 |content={{Hilfe/ticbox|OOJS=1|tic=0}} Option auswählen}}</nowiki></code>
{{Hilfe/dialog|2=i|label-t=Dialogtitel |label-1=Zurück |label-2=Fertig |width=450 |line=1 |content={{Hilfe/ticbox|OOJS=1|tic=0}} Option auswählen}}

Button 2 progressive<br />
<code><nowiki>{{Hilfe/dialog|2=p|label-t={{int:Syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title}}|label-1=Abbrechen|label-2=Einfügen}}</nowiki></code>
{{Hilfe/dialog|2=p|label-t={{int:Syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title}}|label-1=Abbrechen|label-2=Einfügen}}

Butten 1 fehlt, Button 2 aktiv mit blauer Schrift, Dialogtitel links<br />
<code><nowiki>{{Hilfe/dialog|2=b|label-t={{Hilfe:VisualEditor/!toolitem|Medien|name=2}}|label-2=Bearbeiten}}</nowiki></code>
{{Hilfe/dialog|2=b|label-t={{Hilfe:VisualEditor/!toolitem|Medien|name=2}}|label-2=Bearbeiten}}

Button 2 fehlt<br />
<code><nowiki>{{Hilfe/dialog|label-t={{int:Syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title}}|label-1=Abbrechen}}</nowiki></code>
{{Hilfe/dialog|label-t={{int:Syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title}}|label-1=Abbrechen}}

=== {{Anker|noframe}} Sonderform Tabelle als Inhalt ===
<pre>
<div class="hintergrundfarbe2" style="border: 1px solid #BBBBBB; border-radius: 3px; font-size: 90%; width: 380px; padding: .2em 0;">
{{Hilfe/dialog|2=p|label-t={{int:Syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title}}|label-1=Abbrechen|label-2=Einfügen|noframe=1}}
----
{| class="toptextcells" style="padding: .5em; width:100%;"
|-
|style="width:70px;"| {{int:syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language}} || {{Hilfe/inputarea |content=basic}}
|-
| {{int:Syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code}} ||  {{Hilfe/inputarea |border=2 |placeholder=Programmcode|rows=3 |typ=p}}
|}
{{Hilfe/dialog|3=l|label-3=Löschen |line=1|noframe=1}}
</div>
</pre>
<div class="hintergrundfarbe2" style="border: 1px solid #BBBBBB; border-radius: 3px; font-size: 90%; width: 380px; padding: .2em 0;">
{{Hilfe/dialog|2=p|label-t={{int:Syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-title}}|label-1=Abbrechen|label-2=Einfügen|noframe=1}}
----
{| class="toptextcells" style="padding: .5em; width:100%;"
|-
|style="width:70px;"| {{int:syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-language}} || {{Hilfe/inputarea |content=basic}}
|-
| {{int:Syntaxhighlight-visualeditor-mwsyntaxhighlightinspector-code}} || {{Hilfe/inputarea |border=2 |placeholder=Programmcode|rows=3 |typ=p}}
|}
{{Hilfe/dialog|3=l|label-3=Löschen |line=1|noframe=1}}
</div>

[[Kategorie:Vorlage:Formatierungshilfe nicht für Artikel]]
[[Kategorie:Hilfe:VisualEditor|!dialog]]