In-Page Navigation

Die In-Page Navigation dient der lokalen Navigation innerhalb einer Seite. Sie sorgt für Orientierung bei langen, textlastigen Seiten und erscheint, sobald die Seite gescrollt wird.

Varianten

In-Page Navigation mit Scrollbalken

Mobil als Scrollbalken unter dem Header angeheftet. Zeigt beim Scrollen immer die aktuelle Überschrift an.

Link

In-Page Navigation mit Scrollbalken öffnen

Code

<wm-nav-page>
  <div>
    <wm-anchor>
      <h2>Bruttoinlandsverbrauch</h2>
    </wm-anchor>
    <p>
      Der Bruttoinlandsverbrauch ist im Kalenderjahr 2021 gegenüber 2020 von 39.961 GWh auf 41.467 GWh angestiegen. Dies
      entspricht einer Steigerung von 4 %. Dies ist unter anderem auf die pandemiebedingten Auswirkungen zurückzuführen.
    </p>
    <wm-anchor>
      <h2>Importe und Exporte</h2>
    </wm-anchor>
    <p>
      Die Exporte sind im Kalenderjahr 2021 gegenüber 2020 um 17 % angestiegen, während die Importe nahezu unverändert (3 %)
      geblieben sind. Dies ist unter anderem auf die steigende inländische Erzeugung von Rohenergie zurückzuführen.
    </p>
    <wm-anchor>
      <h2>Endenergieverbrauch</h2>
    </wm-anchor>
    <p>
      Der Endenergieverbrauch im Kalenderjahr 2020 betrug 35 TWh und ist im Kalenderjahr 2021 auf 37 TWh gestiegen. Das
      einspricht einer Veränderung um 5 %. Die größten prozentualen Veränderungen sind bei Heizöl (+515 %) und Braunkohle (+54
      %) bzw. den brennbaren Abfällen ( 93 %) und Koks ( 56 %) zu verzeichnen. In absoluten Zahlen sind die größten
      Veränderungen bei der Fernwärme (+505 GWh), Erdgas (+493 GWh) bzw. beim Flüssiggas (-11 GWh) festzustellen.
    </p>
    <p>
      Der energetische Endverbrauch der privaten Haushalte ist um 11 % angestiegen und ist im Wesentlichen auf eine höhere
      Anzahl an Heizgradtagen zurückzuführen. Auch im Verkehr ist eine Zunahme des energetischen Endverbrauches um 4 % zu
      verzeichnen, der auf die geringeren Einschränkungen durch die Pandemie zurückzuführen ist. Ebenso ist im produzierenden
      Bereich der energetische Endverbrauch nach dem pandemiebedingten Rückgang wieder auf das Niveau der Vorjahre
      angestiegen.
    </p>
    <p>Bei der Betrachtung der Nutzenergieanalyse für die Stadt Wien fällt auf, dass der Einsatz von Endenergie im Bereich
      "Raumklima und Warmwasser" um 8 % (+1.304 GWh) angestiegen ist, während die privaten Haushalte einen Anstieg von 10 %
      (+1.423 GWh) verzeichnen. Im produzierenden Bereich ist der Verbrauch von Endenergie um 10 % angestiegen.
    </p>
    <wm-anchor>
      <h2>Erneuerbare Energien</h2>
    </wm-anchor>
    <p>
      Die inländische Erzeugung von Rohenergie aus Wärmepumpen hat um 43 % zugenommen.
    </p>
    <p>
      Die inländische Erzeugung von Rohenergie im Bereich Photovoltaik hat um 95 % zugenommen und sich somit 2021 gegenüber
      dem Vorjahr nahezu verdoppelt.
    </p>
    <p>
      Insgesamt hat die inländische Erzeugung von Rohenergie im Bereich Erneuerbaren um 10 % zugenommen. Gemessen in
      Gigawattstunden konnte die inländische Erzeugung von Rohenergie mittels Photovoltaik (50 GWh), Umgebungswärme (101 GWh)
      und Solarwärme (6 GWh) um insgesamt 158 GWh gesteigert werden.
    </p>
    <wm-anchor>
      <h2>Lagerbestand</h2>
    </wm-anchor>
    <p>
      Die Veränderung der Energielager betrug im Kalenderjahr 2020 -69 GWh, während im Kalenderjahr 2021 die Lagerveränderung
      um 226 GWh anstieg. Somit wurden im Kalenderjahr 2021 die Lager aufgebaut. Hauptsächlich beruht dieser Zuwachs auf der
      Veränderung des Energieträgers Gasöl für Heizzwecke.
    </p>
    <wm-anchor>
      <h2>Nutzenergieanalyse</h2>
    </wm-anchor>
    <p>
      Die Statistik Austria hat ab dem Berichtsjahr 2022 Veränderungen in der Nutzenergieanalyse, rückwirkend für alle Daten
      ab 1993, vorgenommen. Im Sektor "Private Haushalte" ist der Endenergieverbrauch für "Warmwasser" und "Kochen" nunmehr in
      der Kategorie "Raumklima und Warmwasser" enthalten und wird nicht mehr als "Prozesswärme" ausgewiesen. Diese Veränderung
      wird in den Darstellungen im Energiebericht entsprechend berücksichtigt.
    </p>
  </div>
</wm-nav-page>

In-Page Navigation mit Dropdown

Mobil als Dropdown an den Header angeheftet. Zeigt beim Scrollen immer die aktuelle Überschrift an.

Link

In-Page Navigation mit Dropdown öffnen

Code

<wm-nav-page nav="toggle">
  <div>
    <wm-anchor>
      <h2>Überschrift 1</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    
    <wm-anchor>
      <h2>Überschrift 2</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>

    <wm-anchor>
      <h2>Überschrift 3</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>

    <wm-anchor>
      <h2>Überschrift 4</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
  </div>
</wm-nav-page>

Dev

Zusammenfassung der Regeln

Ein Element wird in die In-Page Navigation aufgenommen, wenn es eine der folgenden Bedingungen erfüllt:

h2-Element mit id-Attribut
h3-Element mit id-Attribut
Element mit data-heading-Attribut (außer data-heading="false")
wm-anchor-Element mit id-Attribut

Ein Element wird nicht in die In-Page Navigation aufgenommen, wenn:

Es das Attribut data-heading="false" hat

Übersicht der HTML-Elemente

Eingeschlossen in die Navigation:
- <h2 id="section1">Section 1</h2>
- <h3 id="subsection1">Subsection 1</h3>
- <div data-heading="true">This is a heading</div>
- <wm-anchor id="anchor1"></wm-anchor>
Ausgeschlossen von der Navigation:
- <h2>without ID</h2>
- <h3 id="subsection2" data-heading="false">Subsection 2</h3>
- <div data-heading="false">Not a heading</div>

Interaktive Demo

Vorschau

Einfache Section

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia, necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?

Diese h2 wird ausgelassen

in anchor not skipped

in anchor skipped

in anchor id auf heading

in anchor id auf wc

h3 mit data-heading

h3 mit id

id aber skipped

Code

<wm-nav-page nav="scroll" data-demo-pattern="wm-nav-page-preview">
  <h2 id="eins">Einfache Section</h2>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <h2>Diese h2 wird ausgelassen</h2>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <wm-anchor>
    <h2>in anchor not skipped</h2>
  </wm-anchor>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <wm-anchor>
    <h2 data-heading="false">in anchor skipped</h2>
  </wm-anchor>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <wm-anchor>
    <h2 id="my-troloe">in anchor id auf heading</h2>
  </wm-anchor>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <wm-anchor id="my-troloe2">
    <h2>in anchor id auf wc</h2>
  </wm-anchor>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <h3 id="test" data-heading="data-heading">
    h3 mit data-heading
  </h3>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <h3 id="test123">
    h3 mit id
  </h3>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <h2 id="test-skipped" data-heading="false">id aber skipped</h2>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, corrupti veniam dolorem quas cum ab quia,
    necessitatibus ipsa minima sed cumque officia reprehenderit nostrum numquam doloribus culpa esse est? Voluptatem?</p>
</wm-nav-page>

API

Abhängigkeiten

HTML

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

JavaScript

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

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`nav`	Art der Navigation	`'scroll'\|'toggle'`	`"scroll"`
`togglebuttonlabel`	Label des Togglebuttons	`String`	`"Thema wählen"`
`_activeAnchor`		`string`	`''`
`_observer`		`null`	`null`
`_updateTimer`		`null`	`null`
`_activeId`

Slots

Name	Beschreibung
`default`	HTML oder Text-Content

Methoden

Eigenschaft	Optionen	Argumente
`_setupIntersectionObserver`		/

CSS API

Property	Beschreibung
`--navpage-shadow`	Schatten der Navigation
`--navpage-link-padding--mobil`	Innenabstand in Links (Mobilansicht unter 64em)
`--navpage-link-size--mobil`	Schriftgröße (Mobilansicht unter 64em)
`--navpage-link-color--mobil`	Schriftfarbe (Mobilansicht unter 64em)
`--navpage-active-link-color--mobil`	Schriftfarbe des aktiven Links (Mobilansicht unter 64em)
`--navpage-active-link-background-color--mobil`	Link Hintergrundfarbe des aktiven Links in der Navigation (Mobilansicht unter 64em)
`--navpage-background-color--mobil`	Hintergrundfarbe der Navigation (Mobilansicht unter 64em)
`--navpage-link-padding--desktop`	Innenabstand in Links (Desktopansicht ab 64em)
`--navpage-link-size--desktop`	Schriftgröße (Desktopansicht ab 64em)
`--navpage-link-color--desktop`	Schriftfarbe (Desktopansicht ab 64em)
`--navpage-active-link-color--desktop`	Schriftfarbe des aktiven Links (Desktopansicht ab 64em)
`--navpage-active-link-background-color--desktop`	Link Hintergrundfarbe des aktiven Links in der Navigation (Desktopansicht ab 64em)
`--navpage-background-color--desktop`	Hintergrundfarbe der Navigation (Desktopansicht ab 64em)
`--navpage-gap`	Abstand zwischen Content und Nav
`--navpage-inset`	Abstand auf der y-Achse
`--navpage-inset--desktop`	Abstand auf der y-Achse (Desktopansicht ab 64em)
`--navpage-transform--default`	Verschiebung auf der y-Achse (Default)
`--navpage-transform--scroll`	Verschiebung auf der y-Achse (Toggle)
`--navpage-transform--scrolled`	Verschiebung auf der y-Achse bei gescrollter Seite
`--navpage-transform-wien--scrolled`	Verschiebung auf der y-Achse bei gescrollter Seite (wien.gv.at)

Kontakt

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

handbuch@ma53.wien.gv.at