menuMDUIDocs
color_lens
Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Tab

Verwendung

  1. Aufruf über benutzerdefinierte Attribute (wenn die Komponente dynamisch generiert wird, ist zur Initialisierung mdui.mutation() erforderlich)
  2. Aufruf über JavaScript

Verwandte Themen

Material Design-Richtlinien: Komponenten - Tabs

Stil

Basisstil

Unten sehen Sie einen Standard-Tab-Balken. Auf Mobilgeräten nimmt er 100 % der Breite ein, wobei jede Option die gleiche Breite hat; auf Tablets/PCs ist er linksbündig ausgerichtet.

codeplay_arrow
Beispiel

        <div class="mdui-tab" mdui-tab>
          <a href="#example1-tab1" class="mdui-ripple">web</a>
          <a href="#example1-tab2" class="mdui-ripple">shopping</a>
          <a href="#example1-tab3" class="mdui-ripple">images</a>
        </div>
        <div id="example1-tab1" class="mdui-p-a-2">web content</div>
        <div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
        <div id="example1-tab3" class="mdui-p-a-2">images content</div>

Scrollleiste

Fügen Sie die Klasse .mdui-tab-scrollable zu <div class="mdui-tab"> hinzu, um den Tab-Balken horizontal scrollbar zu machen, was häufig auf Mobilgeräten mit vielen Optionen verwendet wird.

codeplay_arrow
Beispiel

        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#example2-tab1" class="mdui-ripple">web</a>
          <a href="#example2-tab2" class="mdui-ripple">shopping</a>
          <a href="#example2-tab3" class="mdui-ripple">videos</a>
          <a href="#example2-tab4" class="mdui-ripple">images</a>
          <a href="#example2-tab5" class="mdui-ripple">news</a>
          <a href="#example2-tab6" class="mdui-ripple">maps</a>
          <a href="#example2-tab7" class="mdui-ripple">books</a>
          <a href="#example2-tab8" class="mdui-ripple">flights</a>
          <a href="#example2-tab9" class="mdui-ripple">apps</a>
          <a href="#example2-tab10" class="mdui-ripple">dictionary</a>
        </div>

Zentriert ausgerichtet

Durch Hinzufügen der Klasse .mdui-tab-centered zum Element <div class="mdui-tab"></div> können die Tabs auf Tablets/PCs zentriert ausgerichtet werden.

codeplay_arrow
Beispiel

        <div class="mdui-tab mdui-tab-centered" mdui-tab>
          <a href="#example3-tab1" class="mdui-ripple">web</a>
          <a href="#example3-tab2" class="mdui-ripple">shopping</a>
          <a href="#example3-tab3" class="mdui-ripple">videos</a>
        </div>

100% Breite

Durch Hinzufügen der Klasse .mdui-tab-full-width zum Element <div class="mdui-tab"></div> nimmt der Tab-Balken immer 100% der Breite ein, wobei jeder Tab die gleiche Breite hat.

codeplay_arrow
Beispiel

        <div class="mdui-tab mdui-tab-full-width" mdui-tab>
          <a href="#example4-tab1" class="mdui-ripple">web</a>
          <a href="#example4-tab2" class="mdui-ripple">shopping</a>
          <a href="#example4-tab3" class="mdui-ripple">videos</a>
        </div>

Mit Icons

codeplay_arrow
Beispiel

        <div class="mdui-tab" mdui-tab>
          <a href="#example5-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
          </a>
          <a href="#example5-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
          </a>
          <a href="#example5-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
          </a>
        </div>

Mit Icons und Text

codeplay_arrow
Beispiel

        <div class="mdui-tab" mdui-tab>
          <a href="#example6-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example6-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example6-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Mit Hintergrundfarbe

Fügen Sie dem Element <div class="mdui-tab"></div> die Klasse .mdui-color-[color] hinzu, um dem Tab-Balken eine Hintergrundfarbe zu geben.

codeplay_arrow
Beispiel

        <div class="mdui-tab mdui-color-theme" mdui-tab>
          <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Standardmäßig aktive Option

Durch Hinzufügen der Klasse .mdui-tab-active zum Element <a> wird diese Option standardmäßig aktiviert.

codeplay_arrow
Beispiel

        <div class="mdui-tab" mdui-tab>
          <a href="#example8-tab1" class="mdui-ripple">web</a>
          <a href="#example8-tab2" class="mdui-tab-active mdui-ripple"
            >shopping</a
          >
          <a href="#example8-tab3" class="mdui-ripple">images</a>
        </div>

Deaktivierte Option

Fügen Sie das Attribut disabled zum Element <a> hinzu, um diese Option zu deaktivieren.

codeplay_arrow
Beispiel

        <div class="mdui-tab" mdui-tab>
          <a href="#example9-tab1" class="mdui-ripple">web</a>
          <a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
          <a href="#example9-tab3" class="mdui-ripple">images</a>
        </div>

Verwendung

Aufruf über Attribute

Bei dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie dem Element <div class="mdui-tab"></div> einfach das Attribut mdui-tab="options" hinzu, um die Komponente zu aktivieren.

Wenn die Komponente dynamisch generiert wird, ist zur Initialisierung mdui.mutation() erforderlich.

<div class="mdui-tab" mdui-tab>
...
</div>

Aufruf über JavaScript

Komponente instanziieren:

// selector ist der CSS-Selektor des .mdui-tab-Elements oder das DOM-Element
// options sind die Parameter des Plugins, siehe die Parameterliste unten
var inst = new mdui.Tab(selector, options);
Ausführen

Parameter

ParameternameTypStandardwertBeschreibung
triggerstringclickAuslösemodus zum Umschalten der Tabs.
  • click: Umschalten per Klick
  • hover: Umschalten per Mouseover
loopbooleanfalseGibt an, ob zyklisches Umschalten aktiviert ist. Wenn true, führt die Methode next() beim letzten Tab zurück zum ersten, und die Methode prev() beim ersten Tab zurück zum letzten.

Methode

MethodennameBeschreibung
prev()Zum vorherigen Tab wechseln
next()Zum nächsten Tab wechseln
show(index)Zeigt den angegebenen Tab an.
  • index: Indexnummer oder ID des Tabs
handleUpdate()

Wenn sich die Breite des Elternelements ändert, muss diese Methode aufgerufen werden, um die Position des Indikators neu festzulegen.

Wenn dynamisch neue Tabs hinzugefügt werden, muss diese Methode ebenfalls aufgerufen werden, damit die neuen Tabs wirksam werden.

Ereignis

EreignisnameBeschreibungZielParameter
change.mdui.tabWird ausgelöst, wenn der Tab gewechselt wird.<div class="mdui-tab"></div>
  • event._detail.inst: Instanz
  • event._detail.index: Indexnummer des aktivierten Tabs
  • event._detail.id: ID des Inhalts des aktivierten Tabs
show.mdui.tabWird ausgelöst, wenn zu einem bestimmten Tab gewechselt wird.<a></a>event._detail.inst: Instanz

CSS-Klassenliste

KlassennameBeschreibung
.mdui-tabDefiniert eine Tab-Komponente.
.mdui-tab-scrollableScrollbare Tab-Komponente.
.mdui-tab-centeredZentriert ausgerichtete Tab-Komponente.
.mdui-tab-full-widthTab-Komponente mit 100% Breite.
.mdui-tab-activeOption im aktiven Zustand.
arrow_backPrevious
Grid List
arrow_forwardNext
Toolbar