Quelltext der Seite Vorlage:Standardbaustein/Doku

<noinclude>{{Dokumentation/Dokuseite}}</noinclude>
{{TemplateData|JSON=
{ "description": "'''Baustein''' in meist voller Breite für Qualitätssicherungs- und sonstige wichtige Hinweise; barrierefrei",
  "params": {
     "TYP":
        { "label":       "Design",
          "description": "Designvariante",
          "type":        "line",
          "required":    true,
          "suggestedvalues": [
            { "code":  "dunkelrot",
              "label": "dunkelroter Rahmen (<code>4</code>)",
              "class": "hintergrundfarbe1",
              "style": "border-color: #C00000; border-style: solid; border-width: 2px; background:#{{Standardfarbe|hintergrund|1}}; color: #202122;" },
            { "code":  "hellgrau",
              "label": "hellgrauer Rahmen (<code>5</code>)",
              "class": "hintergrundfarbe1",
              "style": "border-color: #EAECF0; border-style: solid; border-width: 3px; background:#{{Standardfarbe|hintergrund|1}}; color: #202122;" },
            { "code":  "dunkelgrau",
              "label": "dunkelgrauer Rahmen (<code>6</code>)",
              "class": "hintergrundfarbe1",
              "style": "border-color: #8888AA; border-style: solid; border-width: 2px; background:#{{Standardfarbe|hintergrund|1}}; color: #202122;" },
            { "code":  "hellgrün",
              "label": "hellgrüner Rahmen (<code>7</code>)",
              "class": "hintergrundfarbe1",
              "style": "border-color: #00CC33; border-style: solid; border-width: 2px; background:#{{Standardfarbe|hintergrund|1}}; color: #202122;" },
            { "code":  "dunkelgrün",
              "class": "hintergrundfarbe2",
              "label": "dunkelgrüner Rahmen (<code>8</code>)",
              "style": "border-color: #009900; border-style: solid; border-width: 2px; color: #202122;" },
            { "code":  "rotROT",
              "label": "roter Rahmen zu rotem Untergrund (<code>9</code>)",
              "style": "background-color: #FFDDDD; border-color: #DD0000; border-style: solid; border-width: 3px; color: #202122;" },
            { "code":  "blauBLAU",
              "label": "blauer Rahmen zu blauem Untergrund (<code>10</code>)",
              "style": "background-color: #DDDDFF; border-color: #0000DD; border-style: solid; border-width: 3px; color: #202122;" },
            { "code":  "hellgrauKLEIN",
              "label": "hellgrauer Rahmen zu hellgrauem Untergrund, aber verminderte Breite und Kasten zentriert (<code>11</code>)",
              "style": "background-color: #EEEEEE; border-color: #DEDEDE; border-style: solid; border-width: 3px; color: #202122; width:85%;" },
            { "code":  "rot",
              "label": "roter Rahmen (<code>12</code>)",
              "class": "hintergrundfarbe2",
              "style": "border-color: #FF0000; border-style: solid; border-width: 3px; color: #202122;" },
            { "code":  "orange",
              "label": "orangefarbiger Rahmen (<code>13</code>)",
              "class": "hintergrundfarbe2",
              "style": "border-color: #EE7F00; border-style: solid; border-width: 3px; color: #202122;" },
            { "code":  "-",
              "label": "Indivuelle Gestaltung nur über <code>[[#templatedata:class|class]]</code> und <code>[[#templatedata:style|style]]</code>" }
                             ],
          "example":     "blauBLAU" },
     "INHALT":
        { "label":       "Nutztext",
          "description": "Textbereich",
          "type":        "content",
          "required":    true },
     "class":
        { "label":       "",
          "description": "zusätzliche Klassen; durch Leerzeichen separiert",
          "type":        "line",
          "required":    false },
     "noprint":
        { "label":       "",
          "description": "vom Druck ausschließen",
          "type":        "boolean",
          "required":    false,
          "default":     "0",
          "example":     "1" },
     "style":
        { "label":       "",
          "description": "zusätzliche CSS-Deklarationen",
          "type":        "line",
          "required":    false },
     "SCHRIFT%":
        { "label":       "Schrift&shy;größe",
          "description": "Schriftgröße in Prozent",
          "type":        "number",
          "required":    false,
          "default":     "100",
          "example":     "92" },
     "TEXTBREITE":
        { "label":       "Text&shy;breite",
          "description": "Maximale Länge der Fließtext-Zeilen (nicht die Breite der Box) in&nbsp;<code>em</code> zur besseren Lesbarkeit auf breiten Bildschirmen; mit <code>-</code> oder <code>0</code> ohne Breitenbeschränkung",
          "type":        "line",
          "required":    false,
          "default":     "70",
          "example":     "-" },
     "id":
        { "label":       "Anker",
          "description": "[[Fragmentbezeichner]] („Anker“, Sprungziel)",
          "type":        "line",
          "required":    false },
     "role":
        { "label":       "ARIA-Rolle",
          "description": "[[Accessible Rich Internet Applications|ARIA]]-Rolle (für Nicht-Sehende)",
          "type":        "line",
          "required":    false,
          "suggestedvalues": [
            { "code":  "navigation",
              "label": "Baustein ist wesentlich für die Navigation zwischen Seiten oder über die gesamte Seite, etwa im Zusammenhang mit Begriffsklärungshinweisen usw." },
            { "code":  "contentinfo",
              "label": "Baustein beschreibt kurzgefasst den Inhalt der gesamten Seite, etwa [[Vorlage:Begriffsklärung]]" }
                             ] },
     "lang":
        { "label":       "Sprache",
          "description": "Sprachcode nach [[ISO 639]] usw.",
          "type":        "line",
          "required":    false,
          "example":     "en" },
     "dir":
        { "label":       "Schreib&shy;richtung",
          "description": "Schreibrichtung (nicht erben)",
          "type":        "line",
          "required":    false,
          "default":     "(ltr)",
          "example":     "rtl" },
     "ICON":
        { "label":       "Icon",
          "description": "Eyecatcher (redundant)<noexport>.<br />
Icons sind nur dekorativ, und die vom Publikum erwartete Funktion wäre, dass sie ggf. mit einer Projektseite verlinkt sind, oder überhaupt nicht.<br />
Es dürfen deshalb nur Public-Domain-Grafiken verwendet werden, weil eine Verlinkung mit der Lizenz an dieser Stelle sehr irritierend wäre.<br />
Falls ein Tooltip-Text als letzter Datei-Parameter angegeben wurde, muss auch mittels <code>&#124;alt=&#124;</code> die Interpretation des Tooltips als Bildbeschreibung unterbunden werden.</noexport>",
          "type":        "content",
          "required":    false },
     "ICON.nomobile":
        { "label":       "ICON mobil",
          "description": "Icon auf Mobilgeräten nicht anzeigen",
          "type":        "boolean",
          "required":    false,
          "default":     "0",
          "example":     "1" }
            },
  "format": "block"
}
|TOC=1}}

== Kopiervorlagen ==
<syntaxhighlight lang="wikitext" copy>
{{Standardbaustein |TYP=
 |ICON=
 |INHALT=
}}
{{Standardbaustein |TYP=
 |class=
 |noprint=
 |style=
 |SCHRIFT%=
 |TEXTBREITE=
 |id=
 |role=
 |lang=
 |dir=
 |ICON=
 |ICON.nomobile=
 |INHALT=
}}
</syntaxhighlight>

== Designvarianten ==
Für den <code>[[#templatedata:TYP|TYP]]</code> gibt es folgende Möglichkeiten:
{| class="wikitable"
|-
! Numerisch !! Schlüsselwort !! Anmutung
|-
| <code>1</code><br /> <code>2</code><br /> <code>3</code>
|colspan="2" style="min-width:10em"| Siehe [[Vorlage:Hinweisbaustein]]
|-
| <code>4</code>
| <code>dunkelrot</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=4|INHALT=dunkelroter Rahmen}}
|-
| <code>5</code>
| <code>hellgrau</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=5|INHALT=hellgrauer Rahmen}}
|-
| <code>6</code>
| <code>dunkelgrau</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=6|INHALT=dunkelgrauer Rahmen}}
|-
| <code>7</code>
| <code>hellgrün</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=7|INHALT=hellgrüner Rahmen}}
|-
| <code>8</code>
| <code>dunkelgrün</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=8|INHALT=dunkelgrüner Rahmen}}
|-
| <code>9</code>
| <code>rotROT</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=9|INHALT=roter Rahmen zu rotem Untergrund}}
|-
| <code>10</code>
| <code>blauBLAU</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=10|INHALT=blauer Rahmen zu blauem Untergrund}}
|-
| <code>11</code>
| <code>hellgrauKLEIN</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=11|INHALT=hellgrauer Rahmen<br /> zu hellgrauem Untergrund<br /> aber verminderte Breite<br /> und zentriert}}
|-
| <code>12</code>
| <code>rot</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=12|INHALT=roter Rahmen}}
|-
| <code>13</code>
| <code>orange</code>
|class="hintergrundfarbe2"| {{Standardbaustein|TYP=13|INHALT=orangefarbiger Rahmen}}
|-
| <code>0</code>
| <code>-</code>
| {{Standardbaustein|TYP=-|INHALT=freie Dekoration}}
|}

== Beispiele ==
<syntaxhighlight lang="wikitext">
{{Standardbaustein |TYP=dunkelrot |INHALT=QS |ICON=[[Datei:Face-smile.svg|22px|verweis=WP:QS|alt=|Geht ja gut los]]}}
</syntaxhighlight>
{{Standardbaustein |TYP=dunkelrot |INHALT=QS |ICON=[[Datei:Face-smile.svg|22px|verweis=WP:QS|alt=|Geht ja gut los]]}}

== Barrierefreiheit ==
Dieses Muster verzichtet auf [[Hilfe:Textgestaltung/Barrierefreiheit#Layout-Tabelle|Layout-Tabellen]] und blendet das Icon bei [[Screenreader]]n aus.

== Veraltete Methodik ==

Die vordefinierten Designvarianten übernehmen die folgenden auf Tabellen-Technik basierenden Attribut-Vorlagen.

{| {{Bausteindesign4}}
|-
| [[Vorlage:Bausteindesign4]]
|}


{| {{Bausteindesign5}}
|-
| [[Vorlage:Bausteindesign5]]
|}


{| {{Bausteindesign6}}
|-
| [[Vorlage:Bausteindesign6]]
|}


{| {{Bausteindesign7}}
|-
| [[Vorlage:Bausteindesign7]]
|}


{| {{Bausteindesign8}}
|-
| [[Vorlage:Bausteindesign8]]
|}


{| {{Bausteindesign9}}
|-
| [[Vorlage:Bausteindesign9]]
|}


{| {{Bausteindesign10}}
|-
| [[Vorlage:Bausteindesign10]]
|}


{| {{Bausteindesign11}}
|-
| [[Vorlage:Bausteindesign11]]
|}


{| {{Bausteindesign12}}
|-
| [[Vorlage:Bausteindesign12]]
|}


{| {{Bausteindesign13}}
|-
| [[Vorlage:Bausteindesign13]]
|}

{{Dokumentation/Siehe auch|Liste=
* [[Vorlage:Hinweisbaustein]] – Bausteindesign1 – Bausteindesign3
}}
<includeonly>
[[Kategorie:Vorlage:für Vorlagen]]
</includeonly>