Quelltext der Seite Vorlage:Tutorials/Mockup

<noinclude>{{SeitenordnungWP.de
| Obereinordnung1 = ∆MW-Verwaltung
}}</noinclude>
<onlyinclude>{{#ifeq:{{{only|}}}|end||<div class="tutorial-mockup" style="border: 1px #DDD solid;box-shadow: inset.1em .2em .6em rgba(0,0,0,.2);border-radius: .2em;font-size: .9em;color: #00008B;background: #FFFFFF;padding: 0;margin: 1.2em 0;max-width:100%; max-height:66vh;overflow: auto;{{{styles|}}}"><div style="padding:1em;{{{inner-styles|}}}">
{{{content|}}} }}
{{#ifeq:{{{only|}}}|start||</div></div>}}</onlyinclude>

{{Dokumentation/ruler}}
Diese Vorlage dient dazu Abschnitte auf Hilfe- und Tutorialseiten u.ä. zu kennzeichnen, die ein [[Mock-up]]<!-- irgendwie ein verwirrender Link [[Mock-up#Softwareentwicklung]] oder [[Mock-Objekt]] ?--> oder einen Screenshot einer Nutzeroberfläche enthalten.<!-- ich verstehe nicht einmal den ersten Satz hier „Screenshot einer Nutzeroberfläche“?-->

== Parameter ==
<!--
; content
: Inhalt, der innerhalb dieses Rahmens angezeigt werden soll. -->
; only
: Der Wert <code>start</code> sorgt dafür, dass nur der Anfangsbereich der Vorlage ausgegeben wird. Der Inhalt des Abschnittes kann dann einfach druntergeschrieben werden, muss dann aber eigenständig mit <code>end</code> abgeschlossen werden. Der Parameter <code>content</code><!-- welcher Parameter content?--> darf in diesem Fall nicht gesetzt sein.
: Der Wert <code>end</code> schließt einen mit <code>start</code> geöffneten Abschnitt. Keine weiteren Parameter nötig.
; styles
: Inline-Styles für den äußeren Container (überschreiben ggf. die Stile der Vorlage)
; inner-styles<!-- man sollte den Parameter schon korrekt bezeichnen, wenn man den verwenden können soll-->
: Inline-Styles für den inneren Container (überschreiben ggf. die Stile der Vorlage)

== Beispiele ==

=== Einfachste Version ===
<pre>
{{Tutorials/Mockup|content=Der Inhalt des MockUps}}
</pre>
{{Tutorials/Mockup|content=Der Inhalt des Mockups}}

=== Separate Start und End-Vorlagen ===
<pre>
{{Tutorials/Mockup|only=start}}
Der Inhalt des Mockups
{{Tutorials/Mockup|only=end}}
</pre>
{{Tutorials/Mockup|only=start}}
Der Inhalt des Mockups
{{Tutorials/Mockup|only=end}}

=== Schachteln mit styles (Schatteneffekt) ===
{{Tutorials/Mockup|content= Außeninhalt 1
{{Tutorials/Mockup|content=Inhalt 2 |styles=background:#ABCDEF; color:#0000FF}}
{{Tutorials/Mockup|content=Inhalt 3 |styles=background:#FEDCBA; color:#FF0000}}
{{Tutorials/Mockup|content=Inhalt 4 |styles=background:#{{Hilfe/style|bg}}; color:#008000}}
|styles=background:#FAFAD2;
}}

=== Schachteln mit inner-styles (kein Schatteneffekt) ===
{{Tutorials/Mockup|content= Außeninhalt 1
{{Tutorials/Mockup|content=Inhalt 2 |inner-styles=background:#ABCDEF; color:#0000FF}}
{{Tutorials/Mockup|content=Inhalt 3 |inner-styles=background:#FEDCBA; color:#FF0000}}
{{Tutorials/Mockup|content=Inhalt 4 |inner-styles=background:#{{Hilfe/style|bg}}; color:#008000}}
|inner-styles=background:#FAFAD2;
}}

== Siehe auch ==
* [[Vorlage:Tutorials]]

[[Kategorie:Vorlage:Formatierungshilfe nicht für Artikel]]