Vorlage:Standardbaustein: Unterschied zwischen den Versionen

Aus SWPedia
Zur Navigation springen Zur Suche springen
Die Seite wurde neu angelegt: „<onlyinclude><includeonly><div {{#switch: {{{TYP|}}} |0|- |4|dunkelrot |5|hellgrau |6|dunkelgrau |7|hellgrün |8|dunkelgrün |9|rotROT |10|blauBLAU |11|hellgrauKLEIN |12|rot |13|orange= class="{{#switch: {{{TYP|}}} |4|dunkelrot |5|hellgrau |6|dunkelgrau |7|hellgrün |8|dunkelgrün |12|rot |13|orange |!demo=hintergrundfarbe{{#switch: {{{TYP}}} |8|dunke…“
 
Keine Bearbeitungszusammenfassung
Zeile 83: Zeile 83:
|#default=class="error">FEHLER – [[Vorlage:Standardbaustein]] ohne TYP
|#default=class="error">FEHLER – [[Vorlage:Standardbaustein]] ohne TYP
}}</div></includeonly></onlyinclude>
}}</div></includeonly></onlyinclude>
<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.
<includeonly>
[[Kategorie:Vorlage:für Vorlagen]]
</includeonly>

Version vom 28. Januar 2026, 21:53 Uhr

Vorlage:Dokumentation/Dokuseite Vorlage:TemplateData

Kopiervorlagen

{{Standardbaustein |TYP=
 |ICON=
 |INHALT=
}}
{{Standardbaustein |TYP=
 |class=
 |noprint=
 |style=
 |SCHRIFT%=
 |TEXTBREITE=
 |id=
 |role=
 |lang=
 |dir=
 |ICON=
 |ICON.nomobile=
 |INHALT=
}}

Designvarianten

Für den TYP gibt es folgende Möglichkeiten:

Numerisch Schlüsselwort Anmutung
1
2
3
Siehe Vorlage:Hinweisbaustein
4 dunkelrot
dunkelroter Rahmen
5 hellgrau
hellgrauer Rahmen
6 dunkelgrau
dunkelgrauer Rahmen
7 hellgrün
hellgrüner Rahmen
8 dunkelgrün
dunkelgrüner Rahmen
9 rotROT
roter Rahmen zu rotem Untergrund
10 blauBLAU
blauer Rahmen zu blauem Untergrund
11 hellgrauKLEIN
hellgrauer Rahmen
zu hellgrauem Untergrund
aber verminderte Breite
und zentriert
12 rot
roter Rahmen
13 orange
orangefarbiger Rahmen
0 -
freie Dekoration

Beispiele

{{Standardbaustein |TYP=dunkelrot |INHALT=QS |ICON=[[Datei:Face-smile.svg|22px|verweis=WP:QS|alt=|Geht ja gut los]]}}

Barrierefreiheit

Dieses Muster verzichtet auf Layout-Tabellen und blendet das Icon bei Screenreadern aus.