Reiter

Reiter ordnen Inhalte wie Registerkarten auf hintereinander liegenden Feldern an. Sie eignen sich für Inhalte, die nicht auf den 1. Blick sichtbar sein müssen und sollten auch nur in solchen Fällen eingesetzt werden.
Achtung SEO-relevant: Inhalte hinter Reitern bekommen weniger Aufmerksamkeit und werden von der Google-Suche weniger berücksichtigt.
Reiter innerhalb von Reitern sind nicht erlaubt.

Varianten

Reiter

Link

Code

<wm-tabs>
  <wm-tab slot="tab">Reiter 1</wm-tab>
  <wm-tabpanel>
    Inhalt 1
  </wm-tabpanel>
  <wm-tab slot="tab">Reiter 2</wm-tab>
  <wm-tabpanel>
    Inhalt 2
  </wm-tabpanel>
</wm-tabs>

Reiter mit benutzerdefiniertem Styling

Link

Reiter mit benutzerdefiniertem Styling öffnen

Code

<wm-tabs class="custom-tabs" theme="clean">
  <wm-tab slot="tab">Reiter 1</wm-tab>
  <wm-tabpanel class="code-preview-rendered">
    Inhalt 1
  </wm-tabpanel>
  <wm-tab slot="tab">Reiter 2</wm-tab>
  <wm-tabpanel>
    <div class="code-preview">
      Inhalt 2
    </div>
  </wm-tabpanel>
</wm-tabs>

API

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`selectedIndex`	Index des ausgewählten Tabs	`Number`	`0`
`remember`	Zuletzt geöffneten Tab speichern	`Boolean`	`false`
`theme`	Tab-Design	`'clean'`	`'default'`
`id`		`string`

Slots

Name	Beschreibung
`tab`	Bezeichnung im Reiter
`default`	Inhalte

Kontakt

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

handbuch@ma53.wien.gv.at