Anker

Ein Anker ist ein Link zu einer Überschrift auf derselben oder einer anderen Seite. Bei Klick auf das Anker-Symbol wird der Link automatisch in die Zwischenablage kopiert.

Varianten

Anker

Vorschau

Aktuelle Meldungen

Code

<wm-anchor id="meineid">
  <h3>Aktuelle Meldungen</h3>
</wm-anchor>

Dev

Weitere Beispiele

Anker mit manuell gesetzer ID

Achtung: keine Doppelung der IDs

Vorschau

Aktuelle Meldungen

Code

<wm-anchor id="idaufankermanuell">
  <h3>Aktuelle Meldungen</h3>
</wm-anchor>
<wm-anchor id="idaufankermanuell1">
  <h3>Aktuelle Meldungen</h3>
</wm-anchor>

Anker auf Überschrift mit manuell gesetzter ID

Achtung: keine Doppelung der IDs

Vorschau

Aktuelle Meldungen

Code

<wm-anchor>
  <h3 id="customid">Aktuelle Meldungen</h3>
</wm-anchor>
<wm-anchor>
  <h3 id="customid1">Aktuelle Meldungen</h3>
</wm-anchor>

Anker mit mehreren gleichen Überschriften

Automatische Generierung der IDs

Vorschau

Weitere Informationen

Code

<wm-anchor>
  <h3>Weitere Informationen</h3>
</wm-anchor>
<wm-anchor>
  <h3>Weitere Informationen</h3>
</wm-anchor>

Anker mit anderem Icon auf Überschrift

Vorschau

Weitere Informationen

Code

<wm-anchor icon="embed">
  <h3>Weitere Informationen</h3>
</wm-anchor>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Anchor/Anchor.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Icon/Icon.js" type="module"></script>

JavaScript

import { Anchor } from './wienermelange/assets/js/components/Anchor/Anchor.js';
    import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`copyText`	Text für das "Link kopieren" Icon. [TEXT] wird automatisch durch die Überschrift ersetzt.	`String`	`"Link zu [TEXT] kopieren"`
`successText`	Text für die Meldung nachdem der Link kopiert worden ist.	`String`	`"Link erfolgreich kopiert"`
`icon`	Icon für den "Link kopieren"-Link	`String`	`"link"`
`id`	Die ID kann entweder auf dem Element selber oder der Überschrift vergeben werden.	`String`	leer

Slots

Name	Beschreibung
`default`	h2, h3, h4, h5, oder h6

CSS API

Property	Beschreibung
`--anchor-gap`	Abstand zwischen Text und Link

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at