Link-List-Anchor – digital.sbb.ch

Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch

English

Link-List-Anchor.

Übersicht

Anteprima.

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.

Componente simile.

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.

Specifica.

Apri in Figma

Beispiele

Default.

Size XS.

Size S.

Size M.

Slotted Title.

Negative.

HTML in Zwischenablage kopiert.

Implementation

Web Components.

Il web component si trova nel pacchetto @sbb-esta/lyne-elements.

Storybook con esempi interattivi

Codice sorgente su GitHub

Documentazione.

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.

Questo componente è disponibile anche per Angular nel pacchetto @sbb-esta/lyne-angular.

Panoramica Angular

API Angular

Esempi Angular

API

class: `SbbLinkListAnchorElement`, `sbb-link-list-anchor`.

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.

Navigieren auf digital.sbb.ch

Anteprima.

Was macht die Komponente?

Wann soll die Komponente eingesetzt werden?

Componente simile.

Regeln.

Specifica.

Web Components.

Documentazione.

Slots.

Style.

Angular.

class: SbbLinkListAnchorElement, sbb-link-list-anchor.

Properties.

Slots.

class: `SbbLinkListAnchorElement`, `sbb-link-list-anchor`.