Status

Zeigt in unterschiedlichen Farben den Status eines Projekts oder einer Information an.
Möglich sind: Schwarz, Grün, Gelb, Dunkelgelb, Orange, Rot und Hellgrau.
Neben der Farbe muss der Status immer auch textlich angeführt sein.

Varianten

Status - Bäderampel

Vorschau

Code

<wm-fetch dataset="features" url="https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:SCHWIMMBADOGD&srsName=EPSG:4326&outputFormat=json&cql_filter=strIndexOf(WEBLINK1%2C%27amalienbad%27)%3E-1">
  <div slot="results">
    <wm-status data-fetch-attributes data-fetch-attribute1="statusText:properties.AUSLASTUNG_AMPEL_KAT_TXT_0" data-fetch-attribute2="status:properties.AUSLASTUNG_AMPEL_KATEGORIE_0"></wm-status>
  </div>
</wm-fetch>

Status - Regierungsmonitor

Vorschau

Neue Arbeitsformen begleiten und gestalten
Regierungsprogramm	Umsetzungsstand
Chancen des mobilen Arbeitens nutzen
Glasfasernetz in den Bezirken ausbauen und 5G-Ausbau unterstützen

Code

<wm-table alignment="start, end">
  <table>
    <caption>Neue Arbeitsformen begleiten und gestalten</caption>
    <thead>
      <tr>
        <th>
          Regierungsprogramm
        </th>
        <th>
          Umsetzungsstand
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="#">Chancen des mobilen Arbeitens nutzen</a></td>
        <td><wm-status label="" statusText="in Umsetzung" status="2" reverse></wm-status></td>
      </tr>
      <tr>
        <td><a href="#">Glasfasernetz in den Bezirken ausbauen und 5G-Ausbau unterstützen</a></td>
        <td><wm-status label="" statusText="umgesetzt" status="1" reverse></wm-status></td>
      </tr>
    </tbody>
  </table>
</wm-table>

Dev

Interaktive Demo

label

loadingLabel

status

statusText

reverse

Vorschau

Code

<wm-status data-demo-pattern="wm-status-preview" statusText="Noch Platz hier" status="1"></wm-status>

Weitere Farben

Wichtige Informationen zur Verwendung weiterer Farben finden Sie im Bereich Development - Individuelle Anpassungen.

Die in der Demo aufgelisteten Farben sind nur im Wiener-Melange-Theme verfügbar. Um Ihre eigenen Farben im White-Label-Theme zu definieren, fügen Sie einfach CSS-Regeln nach dem folgenden Muster hinzu:

wm-status[color="meinefarben"] { 
  --status-color: cyan; 
  --status-size: 1rem; 
}

<wm-status 
  label="" 
  statusText="Statustext" 
  color="meinefarben"
></wm-status>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Status/Status.js" type="module"></script>

JavaScript

import { Status } from './wienermelange/assets/js/components/Status/Status.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`label`	Der Text vor der Statusanzeige	`String`	`"Auslastung:"`
`loadingLabel`	Text, der angezeigt wird, solange Daten laden.	`String`	`"Lade Auslastung…"`
`reverse`	Text vor Status anzeigen	`Boolean`	`false`
`status`	ID des jeweiligen Status (0 = Schwarz, 1 = Grün, 2 = Gelb, 3 = Dunkelgelb, 4 = Orange, 5 = Rot, 6 = Hellgrau)	`0\|1\|2\|3\|4\|5\|6`	`6`
`statusText`	Text, der neben der visuellen Anzeige dargestellt wird	`String`	`""`

Slots

Name	Beschreibung
`default`

CSS API

Property	Beschreibung
`--status-gap`	Abstand zwischen Kindelementen
`--status-color`	Farbe des Status
`--status-size`	Größe des Status

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at