Pager

Pager dienen dazu, Seiten oder Kapitel durchzublättern: Beispiel

Varianten

Pager

Vorschau

zurück

weiter

Code

<wm-section highlight="nebelgrau">
  <wm-pager>
    <wm-cta start="" style="--cta-padding-block:0" slot="prevLink">
      <a href="#">zurück</a>
    </wm-cta>
    <wm-cta style="--cta-padding-block:0" slot="nextLink">
      <a href="#">weiter</a>
    </wm-cta>
  </wm-pager>
</wm-section>

Dev

Interaktive Demo

Vorschau

zurück

weiter

Code

<wm-pager>
  <wm-cta start="" style="--cta-padding-block:0" slot="prevLink">
    <a href="#">zurück</a>
  </wm-cta>
  <wm-cta style="--cta-padding-block:0" slot="nextLink">
    <a href="#">weiter</a>
  </wm-cta>
</wm-pager>

API

Abhängigkeiten

HTML

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

JavaScript

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

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`prevText`	Alternative Überschrift für Zurück-Link	`String`	`"Voriges Kapitel:"`
`nextText`	Alternative Überschrift für Weiter-Link	`String`	`"Nächstes Kapitel:"`
`hidePrev`		`boolean`
`hideNext`		`boolean`

Slots

Name	Beschreibung
`prevLink`	Verlinkung zur vorigen Seite
`nextLink`	Verlinkung zur nächsten Seite

CSS API

Property	Beschreibung
`--pager-textpadding`	Einrückung der Überschrift

Kontakt

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

handbuch@ma53.wien.gv.at