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

wm-tabs

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`
`manualid`		`boolean`

Slots

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

wm-tab

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`selected`		`boolean`	`false`

Slots

Name	Beschreibung
`default`	Bezeichnung

wm-tabpanel

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`selected`		`boolean`	`false`

Slots

Name	Beschreibung
`default`	Text- oder HTML-Content

Kontakt

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

handbuch@ma53.wien.gv.at