Wikipedia:Technik/Skin/GUI/MediaWiki/Buttons

Diese Seite zeigt, wie mit CSS-Klassen auf Wikiseiten Navigationselemente erzeugt werden können, die wie die MediaWiki-„Buttons“ (beispielsweise im Anmeldeformular) aussehen. Im Sinne einer möglichst eindeutigen Nutzerführung vor allem im Bereich unserer Hilfeseiten sollten diese Formatierungsmöglichkeiten genutzt werden, um die Wiedererkennung wichtiger Steuerelemente zu fördern.

Grundformatierungen

Es gibt drei Grundformatierungen der Standard-Buttons.

• Bis Anfang 2016 gab es einen vierten Formatierungstyp constructive mit grünem Farbschema, der eine Zustandsveränderung am Inhalt symbolisieren sollte. Da dieser schwer vom blauen Progressive-Button abzugrenzen war, wurden beide verschmolzen (Phabricator-Task, Softwareänderung). Seitdem bekommen auch Buttons mit der Klasse mw-ui-constructive das für Progressive vorgesehene blaue Farbschema.

Allgemein

Standardmäßig hat der Button graue Schrift auf weißem Grund und einen grauen Rahmen. Beim Überstreichen mit der Maus verdunkelt sich die Hintergrundfarbe. Auf diesem Typ bauen alle folgenden Buttons auf, es verändern sich lediglich die genutzten Farben.

Die Klassen-Namen mw-ui- sind seit Oktober 2017 veraltet.

• Mittels der Vorlage:MediaWiki-Button können sie jedoch weiterhin verwendet werden.
• Die neuen Klassen beziehen sich auf die Implementierung mittels OOjs.ui, sind jedoch optisch praktisch unverändert.

<div class="mw-ui-button">mw-ui-button</div> ergibt:

mw-ui-button

Diese Form wird beispielsweise für Suchanfragen genutzt.

progressive

Progressive-Buttons (Fortschritt) sollen zeigen, dass sich hinter dem Button ein erster oder weiterer Schritt in einer Kette von Einzelschritten verbirgt oder dass mit Klick auf den Button ein Zustand verändert wird. Dieser Buttontyp könnte beispielsweise in einem Tutorial genutzt werden, um einen Hinweis auf das nächste Kapitel zu geben. Die Fortschrittsbuttons haben ein blaues Farbschema.

<div class="mw-ui-button mw-ui-progressive">mw-ui-progressive</div> ergibt:

mw-ui-progressive

Diese Form wird beispielsweise für die Erzeugung neuer Abschnitte verwendet.

destructive

Hinter Destructive-Buttons verbergen sich Aktionen, die etwas entfernen oder löschen und daher gut abzuwägen sind. Hier kommt die Warnfarbe Rot zum Einsatz.

<div class="mw-ui-button mw-ui-destructive">mw-ui-destructive</div> ergibt:

mw-ui-destructive

Besondere Formatierungen

ohne Hintergrundfarbe
Wird den Buttons die Klasse mw-ui-quiet angehängt, dann haben sie keine Hintergrundfarbe und keinen Rahmen, sondern erscheinen eher als Links, die ihr Farbschema je nach Buttontyp beim Überstreichen mit der Maus erhalten.

<div class="mw-ui-button mw-ui-progressive mw-ui-quiet">mw-ui-progressive mw-ui-quiet</div> ergibt:

mw-ui-progressive mw-ui-quiet

große Buttons
Durch die Klasse mw-ui-big wird der Button vergrößert und fällt dadurch eher auf.

<div class="mw-ui-button mw-ui-progressive mw-ui-big">mw-ui-progressive mw-ui-big</div> ergibt:

mw-ui-progressive mw-ui-big

Gruppierung

Die Buttons lassen sich sowohl horizontal als auch vertikal gruppieren.

• Buttonstapel

Mit der Klasse mw-ui-block lassen sich die Buttons so formatieren, dass sie wie übereinander gestapelt wirken. Sie erhalten außerdem standardmäßig die volle Breite des übergeordneten Elements. Diesen Buttonstapel kann man dann durch äußere div-Elemente nach Wunsch anordnen und formatieren.

<div class="mw-ui-button mw-ui-block">mw-ui-block 1</div><div class="mw-ui-button mw-ui-block">mw-ui-block 2</div> ergibt:

mw-ui-block 1

mw-ui-block 2

• Buttons nebeneinander

Wird um die Buttons ein div-Element der Klasse mw-ui-button-group definiert, so werden die darin befindlichen Buttons vertikal angeordnet und ihre Rahmen passend formatiert. Damit der Textumlauf nach so einer Buttongruppe wieder funktioniert, muss am Ende ein <div style="clear: both;" /> eingefügt werden.

<div class="mw-ui-button-group">
<div class="mw-ui-button">1</div>
<div class="mw-ui-button">2</div>
<div class="mw-ui-button">3</div>
</div><div style="clear: both;"></div>

ergibt:

1

2

3

Weitere Informationen

• Vorlage:MediaWiki-Button – Vorlage zum Erstellen dieser Buttons
• Gestaltungsrahmen (englisch)
  • mw:MediaWiki UI
  • toollabs:styleguide/desktop/section-2.html – MediaWiki-Buttons (in Teilen veraltet)
  • doc – OOjs UI