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

Abhängigkeiten

HTML

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

JavaScript

import { Tabs } from './wienermelange/assets/js/components/Tabs/Tabs.js';
    import { Tab } from './wienermelange/assets/js/components/Tabs/Tab.js';
    import { TabPanel } from './wienermelange/assets/js/components/Tabs/TabPanel.js';

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'`

Slots

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

Methoden

Eigenschaft	Optionen	Argumente
`reRenderChildren`	Initializes elements like maps when selecting tabs	/

Events

Event	Beschreibung	Rückgabewert
`wm-tab-changed`	Tab wurde gewechselt	`Index des ausgewählten Tabs`

CSS API

Property	Beschreibung
`--tabs-alignment`	Ausrichtung der Tabs in der tablist
`--tabs-border`	Rahmen der gesamten Komponente
`--tabs-gap`	Abstand zwischen den Tabs
`--tabs-padding`	Innenabstand für die gesamten Komponente
`--tabs-spacing`	Abstand zwischen Tablist und Panel
`--tabs-theme-clean-gap`	Abstand zwischen den Tabs (Clean-Theme)
`--tabs-theme-clean-spacing`	Abstand zwischen Tablist und Panel (Clean-Theme)
`--tab-background-color`	Hintergrundfarbe eines einzelnen Tabs
`--tab-background-color--active`	Hintergrundfarbe für ausgewählten Tab
`--tab-border-width`	Rahmenstärke um einen einzelnen Tab
`--tab-border-color`	Rahmenfarbe um einen einzelnen Tab
`--tab-border-color--active`	Rahmenfarbe für ausgewählten Tab
`--tab-font-color`	Schriftfarbe für einzelne Tabs
`--tab-font-color--active`	Schriffarbe für ausgewählten Tab
`--tab-font-variation-settings`	Schriftstärke für WM Variablefont
`--tab-font-weight`	Standard-Schriftstärke
`--tab-padding`	Innenabstand in einem einzelnen Tab
`--tabpanel-padding`	Innenabstand im Tabpanel
`--tabpanel-border-width`	Rahmenstärke um den Tabpanel
`--tabpanel-border-color`	Rahmenfarbe um den Tabpanel

Kontakt

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

handbuch@ma53.wien.gv.at