Popover

Popovers zeigen bei Bedarf weitere Informationen zu einem Objekt an.

Overview

Intro

Das Popover zeigt weitere Informationen zu einem Objekt in einer kompakten Art und Weise an, ohne dass der Dialog verlassen werden muss. Das Popover kann verschiedene GUI-Elemente wie Key-Value-Facets, Fließtext, Bilder oder Diagramme beinhalten. Aktionen können ebenfalls in einer Funktionsleiste im unteren Bereich angezeigt werden.

Popover

Verwendung

👍 Do	👎 Don't
... wenn Zusammenfassungen zu einem Objekt angezeigt werden sollen. ... wenn eine Vorschau auf ein Dokument angezeigt werden soll. ... wenn in einer Tabelle für eine Zelle weitere Informationen angezeigt werden sollen.	... wenn umfangreiche Informationen zu einem Objekt angezeigt werden sollen, verwende dazu einen eigenen Dialog. ... wenn zu einer gesamten Zeile in einer Tabelle zusätzliche Informationen angezeigt werden sollen, verwende dazu eine aufklappbare Tabellenzeile (Item-Details). ... wenn Tipps zu einer Taste oder einem Eingabefeld anzeigt werden soll, verwende dazu Tooltips.

Guidelines

Aufbau

1. Titelleiste inkl. Überschrift und Schließen-Icon-Button (optional)

Nutze die Titelleiste um Informationen zum angezeigten Objekt zu kommunizieren.

2. Inhalt

Der Inhalt ist frei gestaltbar. In den meisten Fällen reichen jedoch einfache Name-Wert-Facetten Gruppen.

3. Pfeilspitze

Die Pfeilspitze zeigt immer auf das Element, zu dem die Informationen gehören. Das Popover lässt sich in Bezug auf seine Position (rechts, links, oben und unten) zum Objekt, auf das es sich bezieht, konfigurieren.

4. Funktionsleiste (Optional)

Bei Bedarf können den Nutzern Aktionen angeboten werden.

Aufbau

Varianten/Typen

Standard

Die Standard Variante kann frei konfiguriert werden.

Varianten Standard

Walkthrough

Die Walkthrough-Variante dient dazu, Nutzern ein Onboarding in den Applikationen zu bieten und auf Features aufmerksam zu machen.

INFO

Ausblick
Detaillierte Tipps zur Umsetzung von Onboardings sind in Form eines Musters in Arbeit.

Variante Walkthrough

Verhalten

1. Anzeigen

Popovers werden durch einen Klick oder Tap auf die dazugehörigen Indikatoren geöffnet. Indikatoren sind in der Regel Texte, die wie Links aussehen.

2. Schließen

Popovers können auf unterschiedliche Weise geschlossen werden:

• Durch eine explizite Schließen-Taste, wenn die Titelleiste angezeigt wird.
• Durch Drücken der Escape-Taste.
• Durch Scrollen der Seite.
• Durch einen Klick oder Tap außerhalb des Popover.
  

Popovers anzeigen und schließen

Barrierefreiheit

Popovers halten den Fokus gefangen. Das bedeutet, dass die Nutzer über die Tabulatortaste ("Tab) oder Hochstell- und Tabulatortaste ("Shift + Tab") den Fokus ausschließlich über die Inhalte vom Popover verschieben können. Inhalte aus der dahinter liegenden Seite lassen sich mehr fokussieren.

Inhalte hinter dem Popover dürfen von assistierenden Technologien nicht mehr vorgelesen werden. Die beste Art um das sicherzustellen, ist, dem Popover und den Inhalten im Hintergrund unterschiedliche Container zu geben, welche über das aria-hidden entsprechen ihrer Zustände gekennzeichnet sind. Das Popover sollte zudem die role=dialog besitzen.

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%252Fpopup

Code Examples

Install

Maven

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-popover-flow</artifactId>
</dependency>
<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-popover-addons-flow</artifactId>
</dependency>

Import

import com.vaadin.flow.component.popover.Popover;
import de.mate_ds.flow.component.popoveraddons.Onboarding;
import de.mate_ds.flow.component.popoveraddons.Onboarding.OnboardingStep;
import de.mate_ds.flow.component.popoveraddons.PopoverContent;

Variants

Default

Anchor anchor = new Anchor("#", "Details anzeigen");

Popover popover = new Popover();
popover.setTarget(anchor);

PopoverContent content = new PopoverContent();
content.setTitleText("Gruppenüberschrift");

FacetList facetList = new FacetList();
facetList.add(
    new Facet("Schlüssel", "Wert"),
    new Facet("Weiterer Schlüssel", "Weiterer Wert")
);
content.add(facetList);
content.getFooter().add(new Button("Aktion"));

Onboarding

H4 target1 = new H4("How to use Popup to create an onboarding experience");
Span target2 = new Span(
        "The idea is to use the Popup component to create a simple Onboarding (also known as Walkthrough) experience for the user."
                + " A simple API was created as part of the component to make it easy to create such onboarding."
                + " There are two classes: Onboarding and OnboardingStep. To use it, create an instance of the Onboarding class and fill it with the OnboardingSteps."
                + " In the simplest form, you only have to provide three things for each OnboardingStep: a target element, a header text, and a content text.");
Button target3 = new Button("Some action");
Onboarding oboarding = new Onboarding();
MyOnboardingStep s1 = new MyOnboardingStep(
        "Welcome!",
        new Facet(
                "The feature is explained here",
                "You can associate the Onboarding Step with any Component on the screen. Note: This popup is configured to show the walkthrough steps in the footer."));
            s1.setTarget(target1);
MyOnboardingStep s2 = new MyOnboardingStep(
        "Bottom positioned",
        new Facet("The feature is explained here", "Popup for this step is positioned to the bottom of the target element."));
            s2.setTarget(target2);
            s2.setPosition(PopoverPosition.BOTTOM);
MyOnboardingStep s3 = new MyOnboardingStep(
        "Components",
        new Facet(
                "This step allows linking to other parts of the application",
                new Span("You can integrate "),
                new Anchor("#", "links"),
                new Span(" as well as CTA-Buttons in the explantation to nudge users to other onboarding activities so they are setup for success.")),
        new Button("Another action"));
            s3.setTarget(target3);
MyOnboardingStep s4 = new MyOnboardingStep("No target set", new Span("This onboarding step does not have any related target element"));
            oboarding.setRenderer(step -> {
        return new VerticalLayout(((MyOnboardingStep) step).getComponents());
        });
        oboarding.setSteps(s1, s2, s3, s4);

Button start = new Button("Start walkthrough", e -> oboarding.start());
            start.addThemeVariants(ButtonVariant.LUMO_PRIMARY);