In-Page Navigation

Die In-Page Navigation dient der lokalen Navigation innerhalb einer Seite und darf nur einmalig vorhanden sein. Sie sorgt für Orientierung bei langen, textlastigen Seiten und erscheint, sobald die Seite gescrollt wird. Es gibt zwei Varianten: eine mit Dropdown-Menü (innerhalb des Headers) und eine mit Scroll-Balken (unterhalb des Headers). Ein opt-in Modus ermöglicht es, nur explizit markierte Überschriften in die Navigation aufzunehmen.

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 include-mode="opt-in" nav="scroll">
  <div>
		<wm-anchor data-nav="Bruttoinlandsverbrauch">
			<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 data-nav="Importe und Exporte">
			<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 data-nav="Endenergieverbrauch">
			<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 data-nav="Erneuerbare Energien">
			<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 id="nutzenergieanalyse" data-nav>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 Scrollbalken (Explizit markierte Elemente)

Mobil als Scrollbalken unter dem Header angeheftet. Die Komponente kann auch mittels opt-in mode wm-nav-page include-mode="opt-in" versehen werden - Explizit markierte Elemente werden mit einem data-nav und optionalen Titel versehen data-nav="Explizite Überschrift"

Link

In-Page Navigation mit Scrollbalken (Explizit markierte Elemente) öffnen

Code

<wm-nav-page include-mode="opt-in" nav="scroll">
	<div>
		<wm-anchor data-nav="BIV kann anders sein">
			<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 data-nav="Importe und Exporte">
			<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 data-nav="Endenergieverbrauch">
			<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 data-nav="Erneuerbare Energien">
			<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 data-nav="Lagerbestand">
			<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 data-nav="Nutzenergieanalyse">
			<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>
		<wm-accordion single open="1">
			<wm-accordion-heading>
				<h3>
					Das ist eine Überschrift im Akkordeon, die nicht automatisch in der Navigation erscheint.
				</h3>
			</wm-accordion-heading>
			<wm-accordion-content>
				<p data-nav="Inhalt 1. Akkordeon">Das ist der Inhalt des Akkordeons, der automatisch in der Navigation erscheint.
					Achtung das Akkordeon muss <code>open</code> sein.</p>
			</wm-accordion-content>
			<wm-accordion-heading data-nav="Überschrift 2. Akkordeon">
				<h3>
					Das ist eine Überschrift im Akkordeon, die automatisch in der Navigation erscheint.
				</h3>
			</wm-accordion-heading>
			<wm-accordion-content>
				<p>Das ist der Inhalt des Akkordeons, der nicht automatisch in der Navigation erscheint.</p>
			</wm-accordion-content>
		</wm-accordion>

		</div>
		</wm-nav-page>
		<section>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>

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>

In-Page Navigation mit Dropdown (Explizit markierte Elemente)

Mobil als Dropdown an den Header angeheftet. Zeigt beim Scrollen immer die aktuelle Überschrift an. Die Komponente kann auch mittels opt-in mode wm-nav-page include-mode="opt-in" versehen werden - Explizit markierte Elemente werden mit einem data-nav und optionalen Titel versehen data-nav="Explizite Überschrift"

Link

In-Page Navigation mit Dropdown (Explizit markierte Elemente) öffnen

Code

<wm-nav-page include-mode="opt-in" nav="toggle">
	<div>
		<wm-anchor data-nav="BIV kann anders sein">
			<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 data-nav="Importe und Exporte">
			<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 data-nav="Endenergieverbrauch">
			<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 data-nav="Erneuerbare Energien">
			<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 data-nav="Lagerbestand">
			<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 data-nav="Nutzenergieanalyse">
			<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>
		<wm-accordion single open="1">
			<wm-accordion-heading>
				<h3>
					Das ist eine Überschrift im Akkordeon, die nicht automatisch in der Navigation erscheint.
				</h3>
			</wm-accordion-heading>
			<wm-accordion-content>
				<p data-nav="Inhalt 1. Akkordeon">Das ist der Inhalt des Akkordeons, der automatisch in der Navigation erscheint. Achtung das Akkordeon muss <code>open</code> sein.</p>
			</wm-accordion-content>
			<wm-accordion-heading data-nav="Überschrift 2. Akkordeon">
				<h3>
					Das ist eine Überschrift im Akkordeon, die automatisch in der Navigation erscheint.
				</h3>
			</wm-accordion-heading>
			<wm-accordion-content>
				<p>Das ist der Inhalt des Akkordeons, der nicht automatisch in der Navigation erscheint.</p>
			</wm-accordion-content>
		</wm-accordion>

	</div>
</wm-nav-page>
<section>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
</section>

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>

Opt-In Modus für die In-Page Navigation

Im Opt-In Modus (include-mode="opt-in") werden nur explizit markierte Elemente in die Navigation aufgenommen. Dies ermöglicht eine gezielte Steuerung, welche Überschriften und Bereiche angezeigt werden.

Regeln für die Aufnahme

Ein Element wird nur aufgenommen, wenn:

Es das Attribut data-nav besitzt (z.B. <h2 data-nav>Überschrift</h2>)
Es das Attribut data-nav="Titel" besitzt (z.B. <h2 data-nav="Mein Titel">Überschrift</h2>)
Es das Attribut data-heading besitzt (Legacy Support)
Ein wm-anchor-Element mit data-nav oder data-heading versehen ist

Ein Element wird nicht aufgenommen, wenn:

Es kein data-nav oder data-heading Attribut besitzt
Es explizit ausgeschlossen wird mit data-nav="false" oder data-heading="false"

Beispiele für Opt-In

Eingeschlossen:
- <h2 data-nav>Abschnitt</h2>
- <h3 data-nav="Wichtiger Unterabschnitt">Unterabschnitt</h3>
- <div data-nav="Spezialbereich">Spezialbereich</div>
- <wm-anchor data-nav="Ankerbereich"><h2>Bereich</h2></wm-anchor>
- <h2 data-heading="Legacy Support">Legacy Überschrift</h2>
Ausgeschlossen:
- <h2>Ohne Attribut</h2>
- <h3 data-nav="false">Nicht aufnehmen</h3>
- <div data-heading="false">Nicht aufnehmen</div>

Hinweise zur Migration

Beim Wechsel von Opt-Out zu Opt-In müssen alle gewünschten Navigationspunkte explizit mit data-nav oder data-heading versehen werden.
Für individuelle Titel in der Navigation kann data-nav="Titel" verwendet werden.
Legacy-Unterstützung für data-heading bleibt erhalten.

Weitere Informationen

Der Opt-In Modus eignet sich besonders für komplexe Seitenstrukturen, bei denen nicht alle Überschriften in der Navigation erscheinen sollen.
Die Navigation wird nur angezeigt, wenn mindestens ein Element die Bedingungen erfüllt.

Tipp: Verwenden Sie den Opt-In Modus, um die Navigation gezielt zu steuern und unnötige Einträge

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/NavPage/Navigation.js" type="module"></script>

JavaScript

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

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`nav`	Art der Navigation	`'scroll'\|'toggle'`	`"scroll"`
`togglebuttonlabel`	Label des Togglebuttons	`String`	`"Thema wählen"`
`includeMode`	Heading selection mode	`'opt-in'\|'opt-out'`	`"opt-out"`

Slots

Name	Beschreibung
`default`	HTML oder Text-Content

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)
`--section-background-color`	Hintergrundfarbe
`--section-border-color`	Rahmenfarbe
`--section-border-width`	Rahmenstärke
`--section-padding`	Innenabstand
`--section-highlight-padding--mobil`	Innenabstand hervorgehoben (Mobilansicht unter 64em)
`--section-highlight-padding--desktop`	Innenabstand hervorgehoben (Desktopansicht ab 64em)
`--section-highlight-background-color`	Hintergrundfarbe hervorgehoben

Kontakt

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

handbuch@ma53.wien.gv.at