luxTabIndex v16 - IHK-GfI/lux-components GitHub Wiki

luxTabindex

Overview / API

Allgemein

Name Beschreibung
import LuxDirectivesModule
selector luxTabIndex

@Input

Name Typ Beschreibung
luxTabIndex string Bestimmt den TabIndex für das Ziel dieser Direktive.
luxApplyToParent boolean Bestimmt, ob der Tab-Index auch für das Parent-Element des Ziels gelten soll.
luxApplyToChildren boolean Bestimmt, ob die Direktive die Kind-Elemente des Ziels nach den luxPotentialChildren durchsucht und für sie den Tab-Index setzt.
luxPotentialChildren string[] Enthält ein Array mit den möglichen Kind-Elementen des Ziels, welche für einen Tab-Index in Frage kommen.

Beispiele

1. Simple

Html

<div class="lux-flex lux-gap-4">
  <lux-datepicker-ac
    luxLabel="Tabindex 1 (LuxDatepicker)"
    luxTabIndex="1"
  ></lux-datepicker-ac>
  <lux-checkbox-ac
    luxLabel="Tabindex 3 (LuxCheckbox)"
    luxTabIndex="3"
  ></lux-checkbox-ac>
  <lux-select-ac
    luxLabel="Tabindex 2 (LuxSelect)"
    luxTabIndex="2"
  ></lux-select-ac>
  <lux-toggle-ac
    luxLabel="Tabindex 4 (LuxToggle)"
    luxTabIndex="4"
  ></lux-toggle-ac>
  <lux-button-ac
    luxLabel="Tabindex 5 (LuxButton)"
    luxTabIndex="5"
  ></lux-button-ac>
</div>

2. Nur Parent mit Tabindex versehen

Html

<div class="lux-flex lux-gap-4">
  <lux-input-ac
    placeholder="Tabindex 1"
    luxTabIndex="1"
    [luxApplyToParent]="true"
    [luxApplyToChildren]="false"
  ></lux-input-ac>
  <lux-input-ac
    placeholder="Tabindex 3"
    luxTabIndex="3"
    [luxApplyToParent]="true"
    [luxApplyToChildren]="false"
  ></lux-input-ac>
  <lux-input-ac
    placeholder="Tabindex 2"
    luxTabIndex="2"
    [luxApplyToParent]="true"
    [luxApplyToChildren]="false"
  ></lux-input-ac>
  <lux-input-ac
    placeholder="Tabindex 4"
    luxTabIndex="4"
    [luxApplyToParent]="true"
    [luxApplyToChildren]="false"
  ></lux-input-ac>
</div>

3. Nur spezielle Children mit Tabindex versehen

Ts

children = ["input", "button", "a", "textarea", "div", "span"];

Html

<div class="lux-flex lux-gap-4">
  <lux-datepicker-ac
    luxLabel="Tabindex 1 (LuxDatepicker)"
    luxTabIndex="1"
    [luxPotentialChildren]="children"
  ></lux-datepicker-ac>
  <lux-checkbox-ac
    luxLabel="Tabindex 3 (LuxCheckbox)"
    luxTabIndex="3"
    [luxPotentialChildren]="children"
  ></lux-checkbox-ac>
  <lux-select-ac
    luxLabel="Tabindex 2 (LuxSelect)"
    luxTabIndex="2"
    [luxPotentialChildren]="children"
  ></lux-select-ac>
  <lux-toggle-ac
    luxLabel="Tabindex 4 (LuxToggle)"
    luxTabIndex="4"
    [luxPotentialChildren]="children"
  ></lux-toggle-ac>
  <lux-button-ac
    luxLabel="Tabindex 5 (LuxButton)"
    luxTabIndex="5"
    [luxPotentialChildren]="children"
  ></lux-button-ac>
</div>
⚠️ **GitHub.com Fallback** ⚠️