Callout

Die Callout-Komponente wird zum Hervorheben oder Abgrenzen von Inhalten verwendet.

Overview

Intro

Die Callout-Komponente wird verwendet um Inhalte aller Art (z. B. Texte, Diagramme, etc.) hervorzuheben oder abzugrenzen. Mit Hilfe der verschiedenen Callout-Varianten ist es zudem möglich eine Statusinformation zu vermitteln.

Callout

Verwendung

👍 Do	👎 Don't
... wenn Informationen mit einem Status visualisiert werden sollen (z. B. Erfolg, Warnung, etc.) ... wenn Inhalte von dem Rest der Seite abgegrenzt werden sollen ... wenn Informationen hervorgehoben werden sollen	... als sofortige Rückmeldung auf eine Interaktion des Nutzers (hierzu wird ein Toast verwendet)

Guidelines

Aufbau

Ein Callout besteht aus einem Hintergrund und dem Callout-Inhalt. Eine Überschrift kann optional verwendet werden. Wird eine Überschrift verwendet, beschreibt diese kurz und prägnant den Inhalt. Der Hintergrund eines Callouts visualisiert den Status. Der Inhalt kann unterschiedlich sein (z.B. Text, Diagramme). Die Größe des Callouts passt sich an den Inhalt an.

Anordnung & Gruppierung

Die "Callout" Komponente sollte so platziert werden, dass sie die Aufmerksamkeit auf sich zieht, ohne dabei den normalen Lesefluss zu stören. Sie kann beispielsweise neben oder unter einem relevanten Abschnitt positioniert werden, um zusätzliche Informationen oder Kontext zu bieten.

Wenn mehrere "Callout" Komponenten verwendet werden, sollten sie gruppiert werden, um eine klare und konsistente Struktur zu schaffen. Dies hilft dem Benutzer, die Informationen schnell zu erfassen und zu verstehen.

Varianten/Typen

Es gibt sechs verschiedene Callout-Varianten: Standard, Sekundär, Information, Erfolg, Warnung und Fehler.

Standard (Default)

Ein Standard-Callout kann für jede Art von Inhalt verwendet werden. Der Status dieser Variante ist neutral. Daher kann diese Callout-Variante gut zur Abgrenzung von Inhalten verwendet werden.

Bei dieser Variante kann links von der Überschrift optional ein Icon gesetzt werden.

Standard

Sekundär (Secondary)

Ein sekundäres Callout wird für Informationen verwendet, welche eher Zusatzinformationen oder Hinweise sind. Der Status dieser Variante ist neutral.

Bei dieser Variante kann links von der Überschrift optional ein Icon gesetzt werden.

Sekundär

Information

Ein Informations-Callout wird verwendet, wenn der Inhalt des Callouts explizit als Information visualisiert werden und die Aufmerksamkeit des Nutzers auf sich ziehen soll.

Information

Erfolg (Success)

Ein Erfolgs-Callout wird verwendet, wenn der Inhalt des Callouts einen positive Information visualisiert.

Erfolg

Warnung (Warning)

Ein Warnungs-Callout wird verwendet, wenn der Inhalt des Callouts einen wichtigen Hinweis oder eine Warnung für den Nutzer enthält.

Warnung

Fehler (Error)

Ein Fehler-Callout wird verwendet, wenn der Inhalt des Callouts einen Fehler beschreibt.

Fehler

Verhalten

Ein Callout dient nur der Information. Der Nutzer kann nicht direkt mit dem Callout interagieren. Wenn die Inhalte einer Callout-Komponente interaktive Elemente sind, kann der Nutzer jedoch mit diesen interagieren.

Ein Inhaltspunkt

Beinhaltet der Callout einen inhaltlichen Punkt, wird kein Aufzählungszeichen verwendet.

Ein Inhaltspunkt

Mehrere Inhaltspunkte

Findet eine Auflistung mehrerer inhaltlicher Punkte statt, werden diese mit Zahlen aufgeführt.

Mehrere Inhaltspunkte

Fokusverhalten

Der Nutzer kann innerhalb des Callouts die Überschrift fokussieren, jedoch nicht die einzelnen inhaltlichen Unterpunkte. Beinhaltet der Callout interaktive Elemente können diese fokussiert werden.

Fokusverhalten

Verlinkung

Verlinkung

Barrierefreiheit

Wenn das Callout interaktive Elemente enthält, müssen diese wie gewohnt über die Tastatur zugänglich sein.

Develop Vue

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-callout--docs

Develop Flow

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fcallout

Code Examples

Install

Maven

<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-callout-flow</artifactId>
</dependency>

Import

import de.mate_ds.flow.component.callout.Callout;
import de.mate_ds.flow.component.callout.CalloutVariant;
import de.mate_ds.flow.component.icon.Icon;
import de.mate_ds.flow.component.icon.MaterialSymbol;

Variants

Neutral

Callout callout = new Callout();
callout.setTitleText("Optionale Überschrift");
callout.setText("Hier wird die ausführliche Beschreibung oder Inhalte aller Art angezeigt.");

// Optional: add icon to the left of the title
Icon icon = new Icon(MaterialSymbol.SymbolHome);
icon.getElement().setAttribute("slot", "icon");
callout.add(icon);

Secondary

Callout callout = new Callout();
callout.addThemeVariants(CalloutVariant.SECONDARY);
callout.setTitleText("Optionale Überschrift");
callout.setText("Hier wird die ausführliche Beschreibung oder Inhalte aller Art angezeigt.");

Info

Callout callout = new Callout();
callout.addThemeVariants(CalloutVariant.INFO);
callout.setTitleText("Optionale Überschrift");
callout.setText("Hier wird die ausführliche Beschreibung oder Inhalte aller Art angezeigt.");

Success

Callout callout = new Callout();
callout.addThemeVariants(CalloutVariant.SUCCESS);
callout.setTitleText("Optionale Überschrift");
callout.setText("Hier wird die ausführliche Beschreibung oder Inhalte aller Art angezeigt.");

Warning

Callout callout = new Callout();
callout.addThemeVariants(CalloutVariant.WARNING);
callout.setTitleText("Optionale Überschrift");
callout.setText("Hier wird die ausführliche Beschreibung oder Inhalte aller Art angezeigt.");

Error

Callout callout = new Callout();
callout.addThemeVariants(CalloutVariant.DANGER);
callout.setTitleText("Optionale Überschrift");
callout.setText("Hier wird die ausführliche Beschreibung oder Inhalte aller Art angezeigt.");