Anchor-Nav

Overview

Intro

Figma

Anchor-Nav

Die Anchor-Nav dient dazu, zwischen den Abschnitten einer Seite zu navigieren, und hilft dem Nutzer sich einen Überblick über die Inhalte der Seite zu verschaffen.

Die Anchor-Nav wird an der gleichen Stelle wie die Navigationsleiste platziert und wird dazu verwendet, um innerhalb einer Seite zwischen Abschnitten zu navigieren. Sie befindet sich immer oberhalb der zu navigierenden Abschnitte.

Verwendung

👍 Do	👎 Don't
Verwenden wenn - eine Seite mehrere Abschnitte aufweist, zwischen denen innerhalb der Seite navigiert werden soll	Nicht verwenden wenn - zwischen mehreren Ansichten navigiert werden soll (hierzu die Sichtreiter verwenden) - zwischen mehreren Seiten eines linear zusammenhängenden Prozesses navigiert werden soll (hierzu die Prozessnavigation verwenden)

Guidelines

Aufbau

Die Anchor-Nav besteht aus einer Linie, die die gesamte verfügbare Breite einnimmt. Oberhalb der Linie befinden sich die Namen der Abschnitte. Die Namenstexte sind horizontal im Abschnitt zentriert. Die Breite der Abschnitte passt sich an die Breite des Textes an.

Verhalten

Die Anchor-Nav befindet sich an der gleichen Stelle wie die Navigationsleiste und zeigt den Namen aller Ankerpunkte nebeneinander an. Der jeweils aktive/sichtbare Ankerpunkt wird hervorgehoben.

	enabled
	selected

Overflow Verhalten

Wenn nicht genügend Platz in der Breite vorhanden ist, um alle Punkte nebeneinander anzuzeigen, erscheinen auf der linken und rechten Seite der Anchor-Nav Pfeile, mit denen nach links und rechts gescrollt werden kann.

	Ohne Overflow
	Mit Overflow

Scroll Verhalten

Technisch basiert die Komponente auf den Tabs, kombiniert mit einem scrollbaren Bereich. Ein Klick auf einen Link in der Anchor‑Nav scrollt die gewählte Sektion in den sichtbaren Bereich. Danach steht die Sektionsüberschrift immer unterhalb der Anchor-Nav und der Navigationspunkt wird hervorgehoben.

Info für DDev

Die Anchor-Nav weist ein "sticky" Verhalten auf. Das heißt, sie kann beim nach unten Scrollen nicht aus dem Sichtbereich gescrollt werden. Wenn die Anchor-Nav mitten auf einer Seite platziert ist, scrollt sie mit den anderen Elementen nach oben bis sie den oberen Rand des Scrollbereichs erreicht hat und bleibt dann sichtbar. Dies hat den Vorteil, dass die Titel der Navigatonspunkte auch beim Scrollen sichtbar bleiben und geklickt werden können.

Scrollt der Nutzer im Inhaltsbereich, dann wird der jeweilige Navigationspunkt hervorgehoben, von dessen Inhalt der größte Teil zu sehen ist. Das heißt beim nach unten Scrollen wird automatisch der nächste Navigationspunkt hervorgehoben, sobald der zugehörige Inhalt zu einem großen Teil sichtbar wird.

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist die Anchor-Nav fokussierbar. Einzelne Abschnitte lassen sich dann mit den Pfeiltasten ansteuern.

Ist ein Abschnittsname oder ein Pfeilbutton im Fokus, kann diese mittels Wagenrückholtaste ("Return"), Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden.

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-tabs--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%252Ftabs

Code Examples

Install

Maven

<dependency>
    <groupId>com.vaadin.componentfactory</groupId>
    <artifactId>anchor-nav</artifactId>
</dependency>

Import

import com.vaadin.componentfactory.AnchorNav;
import com.vaadin.componentfactory.AnchorNavSection;

Variants

Initialization

AnchorNav anchorNav = new AnchorNav();
anchorNav.addThemeVariants(AnchorNavVariant.EXPAND_LAST);

Object section

FacetList first = new FacetList();
first.add(new Facet("Person No.", "1234567"));
first.add(new Facet("Date of birth", "15.06.1952"));

FacetList second = new FacetList();
second.add(new Facet("Salutation", "Herr"));
second.add(new Facet("First name", "Max"));
second.add(new Facet("Last name", "Mustermann"));

AnchorNavSection section = new AnchorNavSection(headerText, new BlockLayout(first, second));
Toolbar header = new Toolbar("Person data");
header.add(new Button("Edit"));
section.setSectionHeader(header);
anchorNav.add(section);

List section

Grid<Foo> grid = new Grid<>();
grid.setSelectionMode(SelectionMode.MULTI);
grid.addThemeVariants(GridVariant.LUMO_COLUMN_BORDERS);
grid.addColumn(Foo::getStreet).setHeader("Street and number").setSortable(true);
grid.addColumn(Foo::getZipCode).setHeader("Zip code").setSortable(true);
grid.addColumn(Foo::getCity).setHeader("City").setSortable(true);

GridAddon addon = new GridAddon();
addon.setPrimaryActionColumnProvider(new GridItemAction<>("Edit"));
addon.setPrimaryActionIconRenderer(LitRenderer.of("<span theme=\"icon\">edit</span>"));
addon.addItemActionClickEventListener(System.out.println(String.format("On address %s the action %s was clicked", e.getItem().getFullAddress(), e.getAction().getText(e.getItem()))));
addon.attach(grid);
        
AnchorNavSection section = new AnchorNavSection(headerText, grid);
Toolbar header = new Toolbar("Foo list");
header.add(new Button("Delete"));
header.syncLoadingWithGrid(grid);
header.syncSizeWithGrid(grid);
section.setSectionHeader(header);
anchorNav.add(section);