Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Meldung

Für Benachrichtigungen, die zu Beginn einer Seite gut sichtbar hervorgehoben werden sollen, zum Beispiel wichtige Hinweise, Warnungen, Fehler- oder Erfolgsmeldungen. Die Farben und Icons sind, wie in den Varianten abgebildet, vorgegeben.

Meldungen dienen meist der Darstellung unmittelbar wichtiger Informationen, die nur zeitlich begrenzt relevant sind. Um längerfristig relevante Informationen oder einzelne Textstellen im Fließtext zu betonen, ist das Pattern Hervorhebung zu verwenden.

Mehrfache Fehlermeldungen in Formularen werden mit der Fehlerliste dargestellt.

 Varianten

Meldung

Hinweis

 Vorschau

Um Ihren Account verifizieren zu können, müssen Ihre Angaben bei "Familienname", "Vorname" und "Geburtsdatum" exakt den Angaben auf Ihrem Identitätsnachweis entsprechen.

 Code 
<wm-notification type="info">
  <p>Um Ihren Account verifizieren zu können, müssen Ihre Angaben bei "Familienname", "Vorname" und "Geburtsdatum" exakt
    den Angaben auf Ihrem Identitätsnachweis entsprechen.</p>
</wm-notification>

Erfolgsmeldung

 Vorschau

Ihre Daten wurden übermittelt und mit der Eingangsnummer 2023-060708569749 gespeichert.

 Code 
<wm-notification type="success">
  <p>Ihre Daten wurden übermittelt und mit der Eingangsnummer 2023-060708569749 gespeichert.</p>
</wm-notification>

Warnung

 Vorschau

Badeverbot: In der Neuen Donau ist derzeit das Baden infolge eines Donau-Hochwassers verboten.

Code 
<wm-notification type="warning">
  <p>
    <strong>Badeverbot:</strong>
    In der Neuen Donau ist derzeit das Baden infolge eines Donau-Hochwassers verboten.
  </p>
</wm-notification>

Fehlermeldung

 Vorschau

Ihre Daten konnten leider nicht gespeichert werden.

 Code 
<wm-notification type="error">
  <p>Ihre Daten konnten leider nicht gespeichert werden.</p>
</wm-notification>

Meldung - wegklickbar

Hinweis - wegklickbar

 Vorschau

Um Ihren Account verifizieren zu können, müssen Ihre Angaben bei "Familienname", "Vorname" und "Geburtsdatum" exakt den Angaben auf Ihrem Identitätsnachweis entsprechen.

 Code 
<wm-notification type="info" dismissible="">
  <p>Um Ihren Account verifizieren zu können, müssen Ihre Angaben bei "Familienname", "Vorname" und "Geburtsdatum" exakt
    den Angaben auf Ihrem Identitätsnachweis entsprechen.</p>
</wm-notification>

Erfolgsmeldung - wegklickbar

 Vorschau

Ihre Daten wurden übermittelt und mit der Eingangsnummer 2023-060708569749 gespeichert.

 Code 
<wm-notification type="success" dismissible="">
  <p>Ihre Daten wurden übermittelt und mit der Eingangsnummer 2023-060708569749 gespeichert.</p>
</wm-notification>

Warnung - wegklickbar

 Vorschau

Badeverbot: In der Neuen Donau ist derzeit das Baden infolge eines Donau-Hochwassers verboten.

 Code 
<wm-notification type="warning" dismissible="">
  <p>
    <strong>Badeverbot:</strong>
    In der Neuen Donau ist derzeit das Baden infolge eines Donau-Hochwassers verboten.</p>
</wm-notification>

Fehlermeldung - wegklickbar

 Vorschau

Ihre Daten konnten leider nicht gespeichert werden.

 Code 
<wm-notification type="error" dismissible="">
  <p>Ihre Daten konnten leider nicht gespeichert werden.</p>
</wm-notification>
Dev

Interaktive Demo
Vorschau

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 Code 
<wm-notification data-demo-pattern="wm-notification-preview">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</wm-notification>
API

Abhängigkeiten

HTML 
<script src="https://assets.wien.gv.at/theme/latest/js/components/notification/notification.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Icon/Icon.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Highlight/Highlight.js" type="module"></script>
 JavaScript 
import { notification } from './wienermelange/assets/js/components/notification/notification.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';
    import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';
    import { Highlight } from './wienermelange/assets/js/components/Highlight/Highlight.js';

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
type Art der Meldung 'info'|'warning'|'error' "info"
dismissible Schließen-Button anzeigen Boolean false
dismissLabel Accessible Name für den Entfernen-Button String "Entfernen"
iconSize string "28"

Slots

Name Beschreibung
default Meldung

Kontakt

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

handbuch@ma53.wien.gv.at