Link-List-Anchor. Übersicht

Vorschau.

Link 1 Link 2 Link 3

Was macht die Komponente?

Die Link-List-Anchor ist eine Liste von Links, die zu Abschnitten der aktuellen Seite springen.

Wann soll die Komponente eingesetzt werden?

  • Um bei längeren Seiten eine Übersicht der Abschnitte zu zeigen und direkt dorthin zu springen.

Ähnliche Komponente.

Link-List Anwendung

Regeln.

  • Die Link-Texte sind beschreibend und entsprechen den Titeln der Abschnitte.
  • Die Reihenfolge der Links entspricht der Reihenfolge der Abschnitte auf der Seite.
  • Die Liste enthält nur Block-Links. Ihre Grösse und Farbvariante setzt die Liste.
  • Für Links zu anderen Seiten wird die Link-List verwendet.

Spezifikation.

In Figma öffnen
Beispiele Default.
Auf Storybook ausprobieren HTML einblenden
Size XS.
Auf Storybook ausprobieren HTML einblenden
Size S.
Auf Storybook ausprobieren HTML einblenden
Size M.
Auf Storybook ausprobieren HTML einblenden
Slotted Title.
Auf Storybook ausprobieren HTML einblenden
Negative.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Storybook mit Live-Beispielen Quellcode auf GitHub

Dokumentation.

The <sbb-link-list-anchor> is a component that can be used to collect and display sbb-block-link.
It is mainly intended to be used as a link list for page anchors.

<sbb-link-list-anchor>
  <sbb-block-link href="#refunds">Refunds</sbb-block-link>
  <sbb-block-link href="#loss-report">Loss Report</sbb-block-link>
  ...
</sbb-link-list-anchor>
Slots.

The component can display an optional title,
which is visually shown as a level-5 sbb-title
and is used as the aria-labelledby attribute of the ul element.

The title can be set using the titleContent property or, alternatively, can be projected using the title slot.

<sbb-link-list-anchor title-content="Help & Contact"> ... </sbb-link-list-anchor>
Style.

The component will accept only <sbb-block-link> or <sbb-block-link-button> instances,
and it will sync its size and negative property with the inner links.

<sbb-link-list-anchor size="xs" negative>
  <sbb-block-link href="#refunds">Refunds</sbb-block-link>
  <sbb-block-link href="#loss-report">Loss Report</sbb-block-link>
  ...
</sbb-link-list-anchor>

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

Angular-Übersicht Angular-API Angular-Beispiele API

Properties.

Name Attribute Privacy Type Default Description
negative negative public boolean false Negative coloring variant flag.
size size public 'xs' | 's' | 'm' null Text size of the nested sbb-block-link instances, either xs (lean theme default), s (standard theme default) or m This will overwrite the size attribute of nested sbb-block-link instances.
titleContent title-content public string '' The title text we want to show before the list.
titleLevel title-level public '1' | '2' | '3' | '4' | '5' | '6' '2' The semantic level of the title, e.g. 2 = h2.

Slots.

Name Description
Use the unnamed slot to add one or more sbb-block-link.
title Use this slot to provide a title.