Paginierung

Eine Paginierung wird verwendet, um Inhalte auf mehrere Seiten zu verteilen, wie zum Beispiel bei Suchergebnissen oder Listen.

Varianten

Paginierung manuell

Liste mit Paginierungselementen manuell übergeben.

Vorschau

Code

<wm-pagination justify="center" hideallcontrols>
  <li>
  <a href="/page/1" class="wm-e-button" aria-disabled="true" aria-label="Erste Seite">
      <wm-icon width="22" iconid="chevron-double-left"></wm-icon>
  </a>
  </li>
  <li>
  <a href="/page/1" class="wm-e-button" aria-disabled="true" aria-label="Vorherige Seite">
      <wm-icon width="22" iconid="chevron-left"></wm-icon>
  </a>
  </li>
  <li>
  <a href="/page/1" class="wm-e-button" aria-current="page"> 1 </a>
  </li>
  <li>
  <a href="/page/2" class="wm-e-button"> 2 </a>
  </li>
  <li>
  <a href="/page/3" class="wm-e-button"> 3 </a>
  </li>
  <li>
  <a href="/page/4" class="wm-e-button"> 4 </a>
  </li>
  <li>
  <a href="/page/5" class="wm-e-button"> 5 </a>
  </li>
  <li>
  <a href="/page/6" class="wm-e-button"> 6 </a>
  </li>
  <li>
  <a href="/page/7" class="wm-e-button"> 7 </a>
  </li>
  <li>
  <a href="/page/8" class="wm-e-button"> 8 </a>
  </li>
  <li>
  <a href="/page/9" class="wm-e-button"> 9 </a>
  </li>
  <li>
  <a href="/page/10" class="wm-e-button"> 10 </a>
  </li>
  <li>
  <a href="/page/2" class="wm-e-button" aria-disabled="false" aria-label="Nächste Seite">
      <wm-icon width="22" iconid="chevron-right"></wm-icon>
  </a>
  </li>
  <li>
  <a href="/page/13" class="wm-e-button" aria-disabled="false" aria-label="Letzte Seite">
      <wm-icon width="22" iconid="chevron-double-right"></wm-icon>
  </a>
  </li>
</wm-pagination>

Paginierung automatisch mit Cards

Über Fetch Komponente gesteuert.

Vorschau

Code

<wm-fetch
  dataset="features"
  itemsPerPage="1"
  url="https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:PARKINFOOGD&srsName=EPSG:4326&outputFormat=json&cql_filter=strIndexOf(ANL_NAME,'bach')>-1"
  pagination="number">
  <div slot="results">
    <wm-grid size="l" data-fetch-content="data-fetch-content"></wm-grid>
  </div>
  <template slot="template">
    <wm-card size="l">
      <h2 slot="heading">
        <span data-fetch-field="properties.ANL_NAME"></span>
      </h2>
      <wm-map-alt
        slot="media"
        id="innenstadt"
        geocoder="geocoder"
        update="update"
        center="16.383657562770395, 48.21091265008741"
        data-demo-pattern="wm-map-preview"
        style="--map-ratio: 16 / 9;--map-height: auto;">
        <wm-mapmarker data-fetch-attribute1="lat:geometry.coordinates.1" data-fetch-attribute2="lng:geometry.coordinates.0">
          <h3 data-fetch-field="properties.ANL_NAME"></h3>
        </wm-mapmarker>
      </wm-map-alt>
      <div slot="content">
        <wm-list type="row">
          <ul>
            <li>
              <wm-icon iconid="vienna"></wm-icon>
              <span>
                <span data-fetch-field="properties.BEZIRK"></span>., Bezirk</span>
            </li>
            <li>
              <wm-icon iconid="clock"></wm-icon>
              Öffnungszeiten:
              <span data-fetch-field="properties.OEFF_ZEITEN"></span>
            </li>
            <li>
              <wm-icon iconid="park"></wm-icon>
              <span>Größe: circa
                <span data-fetch-field="properties.FLAECHE"></span>
                Quadratmeter</span>
            </li>
            <li>
              <wm-icon iconid="phone"></wm-icon>
              Telefon:
              <span data-fetch-field="properties.TELEFON"></span>
            </li>
            <li>
              <wm-icon iconid="language"></wm-icon>
              <a data-fetch-attribute="href:properties.WEBLINK1">Website</a>
            </li>
            <li>
              <wm-stack wrap="" horizontal="" gap="xxs">
                <wm-chip color="frischgruen" size="s" data-fetch-condition="Ja:properties.HUNDE_IM_PARK"><wm-icon iconid="dog" width="22"></wm-icon> Hundezone</wm-chip>
                <wm-chip color="frischgruen" size="s" data-fetch-condition="Ja:properties.WASSER_IM_PARK"><wm-icon iconid="water" width="22"></wm-icon> Wasser im park</wm-chip>
                <wm-chip color="frischgruen" size="s" data-fetch-condition="Ja:properties.SPIELEN_IM_PARK"><wm-icon iconid="games" width="22"></wm-icon> Spielen erlaubt</wm-chip>
                <wm-chip color="morgenrot" size="s" data-fetch-condition="Nein:properties.HUNDE_IM_PARK"><wm-icon iconid="dogno" width="22"></wm-icon> Hunde verboten</wm-chip>
                <wm-chip color="morgenrot" size="s" data-fetch-condition="Nein:properties.WASSER_IM_PARK"><wm-icon iconid="waterno" width="22"></wm-icon> Kein Wasser im Park</wm-chip>
                <wm-chip color="morgenrot" size="s" data-fetch-condition="Nein:properties.SPIELEN_IM_PARK"><wm-icon iconid="gamesno" width="22"></wm-icon> Spielen verboten</wm-chip>
              </wm-stack>
            </li>
          </ul>
        </wm-list>
      </div>
    </wm-card>
  </template>
</wm-fetch>

Dev

Interaktive Demo

Vorschau

Code

<wm-pagination perPage="4">
  <li>
    <button aria-current="false" data-index="1">
      1
    </button>
  </li>
  <li>
    <button aria-current="page" data-index="2">
      2
    </button>
  </li>
  <li>
    <button aria-current="false" data-index="2">
      3
    </button>
  </li>
</wm-pagination>

Weitere Farben

Wichtige Informationen zur Verwendung weiterer Farben finden Sie im Bereich Development - Individuelle Anpassungen.

Um Ihre eigenen Farben im White-Label-Theme zu definieren, fügen Sie einfach CSS-Regeln nach dem folgenden Muster hinzu:

wm-pagination[color="meinefarben"] { 
  --pagination-background-color: yellow;
  --pagination-background-color--active: red;
  --pagination-background-color--hover: orange;
  --pagination-font-color: rgba(0, 0, 0, 1);
  --pagination-font-color--active: yellow;
  --pagination-font-color--hover: white;
}

<wm-pagination
  color="meinefarben"
  current-page="3"
  justify="center"
  max-pages="10"
  per-page="8"
  total="100">
</wm-pagination>

Weitere Beispiele

Paginierung manuell

Liste mit Paginierungselementen manuell übergeben.

Vorschau

Code

<wm-pagination justify="center" hideallcontrols>
    <li>
    <a href="/page/1" class="wm-e-button" aria-disabled="true" aria-label="Erste Seite">
        <wm-icon width="22" iconid="chevron-double-left"></wm-icon>
    </a>
    </li>
    <li>
    <a href="/page/1" class="wm-e-button" aria-disabled="true" aria-label="Vorherige Seite">
        <wm-icon width="22" iconid="chevron-left"></wm-icon>
    </a>
    </li>
    <li>
    <a href="/page/1" class="wm-e-button" aria-current="page"> 1 </a>
    </li>
    <li>
    <a href="/page/2" class="wm-e-button"> 2 </a>
    </li>
    <li>
    <a href="/page/3" class="wm-e-button"> 3 </a>
    </li>
    <li>
    <a href="/page/4" class="wm-e-button"> 4 </a>
    </li>
    <li>
    <a href="/page/5" class="wm-e-button"> 5 </a>
    </li>
    <li>
    <a href="/page/6" class="wm-e-button"> 6 </a>
    </li>
    <li>
    <a href="/page/7" class="wm-e-button"> 7 </a>
    </li>
    <li>
    <a href="/page/8" class="wm-e-button"> 8 </a>
    </li>
    <li>
    <a href="/page/9" class="wm-e-button"> 9 </a>
    </li>
    <li>
    <a href="/page/10" class="wm-e-button"> 10 </a>
    </li>
    <li>
    <a href="/page/2" class="wm-e-button" aria-disabled="false" aria-label="Nächste Seite">
        <wm-icon width="22" iconid="chevron-right"></wm-icon>
    </a>
    </li>
    <li>
    <a href="/page/13" class="wm-e-button" aria-disabled="false" aria-label="Letzte Seite">
        <wm-icon width="22" iconid="chevron-double-right"></wm-icon>
    </a>
    </li>
</wm-pagination>

Paginierung automatisch

Vorschau

Code

<wm-pagination total="40" currentpage="4" class="pagination-automatic2"></wm-pagination>
<script>
  document.querySelector('.pagination-automatic2').addEventListener('wm-page-changed', e => {
    alert(`Current page: ${
      e.detail.currentPage
    }\nPrevious page: ${
      e.detail.previousPage
    }`)
  })
</script>

Paginierung automatisch mit Button für 1. und letzte Seite

Vorschau

Code

<wm-pagination total="40" currentpage="4" class="pagination-automatic3" firstAndLast="firstAndLast"></wm-pagination>
<script>
  document.querySelector('.pagination-automatic3').addEventListener('wm-page-changed', e => {
    console.log(`Current page: ${
      e.detail.currentPage
    }\nPrevious page: ${
      e.detail.previousPage
    }`)
  })
</script>

Paginierung automatisch mit Quicklink-Liste

Über Fetch Komponente gesteuert.

Vorschau

Code

<wm-fetch
  pagination="number"
  dataset="features"
  url="https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:SCHWIMMBADOGD&srsName=EPSG:4326&outputFormat=json">
  <div slot="results">
    <wm-quicklinks>
      <ul data-fetch-content="data-fetch-content"></ul>
    </wm-quicklinks>
  </div>
  <template slot="template">
    <li class="wm-quicklinks-item">
      <wm-cta full="true">
        <a data-fetch-attribute="href:properties.WEBLINK1" data-fetch-field="properties.NAME">Website</a>
      </wm-cta>
    </li>
  </template>
</wm-fetch>

Paginierung automatisch mit benutzerdefinierter Anzahl an Elementen (10)

Vorschau

Code

<wm-fetch
  pagination="number"
  itemsPerPage="10"
  dataset="features"
  url="https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:SCHWIMMBADOGD&srsName=EPSG:4326&outputFormat=json">
  <div slot="results">
    <wm-quicklinks>
      <ul data-fetch-content="data-fetch-content"></ul>
    </wm-quicklinks>
  </div>
  <template slot="template">
    <li class="wm-quicklinks-item">
      <wm-cta full="true">
        <a data-fetch-attribute="href:properties.WEBLINK1" data-fetch-field="properties.NAME">Website</a>
      </wm-cta>
    </li>
  </template>
</wm-fetch>

Paginierung automatisch mit benutzerdefinierter Anzahl an Elementen (3)

Vorschau

Code

<wm-fetch
  pagination="number"
  itemsperpage="3"
  dataset="features"
  url="https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:SCHWIMMBADOGD&srsName=EPSG:4326&outputFormat=json">
  <div slot="results">
    <wm-quicklinks>
      <ul data-fetch-content="data-fetch-content"></ul>
    </wm-quicklinks>
  </div>
  <template slot="template">
    <li class="wm-quicklinks-item">
      <wm-cta full="true">
        <a data-fetch-attribute="href:properties.WEBLINK1" data-fetch-field="properties.NAME">Website</a>
      </wm-cta>
    </li>
  </template>
</wm-fetch>

API

Abhängigkeiten

HTML

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

JavaScript

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

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`currentPage`	Die Aktive Seite	`Number`	`1`
`firstAndLast`	Buttons für erste und letzte Seite anzeigen	`Boolean`	leer
`label`	Label für die navigation-Landmark	`String`	`"Weitere Seiten"`
`maxPages`	Maximale Anzahl an Seiten	`Number`	`10`
`perPage`	Anzahl an darzustellenden Elementen pro Seite	`Number`	`8`
`total`	Anzahl an darzustellenden Elementen ingesamt	`Number`	`0`
`justify`	Ausrichtung auf der Hauptachse	`'center'\|'space-between'`	leer
`hideAllControls`	Versteckt alle Controls	`Boolean`	`false`

Slots

Name	Beschreibung
`default`	Text

Methoden

Eigenschaft	Optionen	Argumente
`_prevPage`		/
`_nextPage`		/
`_click`
`_changePage`
`_updateFirstPage`		/
`_renderItems`		/
`reset`		/
`_renderControlButton`

Events

Event	Beschreibung	Rückgabewert
`wm-page-changed`	Seitenwechsel	`Aktuelle und vorherige Seite (object)`

CSS API

Property	Beschreibung
`--pagination-background-color`	Hintergrundfarbe der Buttons
`--pagination-background-color--active`	Hintergrundfarbe des aktiven Buttons
`--pagination-background-color--hover`	Hintergrundfarbe Hover & Focus
`--pagination-border-color`	Rahmenfarbe der Buttons
`--pagination-border-color--active`	Rahmenfarbe des aktiven Buttons
`--pagination-border-color--hover`	Rahmenfarbe Hover & Focus
`--pagination-font-color`	Schriftfarbe der Buttons
`--pagination-font-color--active`	Schriftfarbe des aktiven Buttons
`--pagination-font-color--hover`	Schriftfarbe Hover & Focus

Kontakt

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

handbuch@ma53.wien.gv.at