-
Notifications
You must be signed in to change notification settings - Fork 5
luxTabIndex v18
Thomas Dickhut edited this page Sep 27, 2024
·
1 revision
Name | Beschreibung |
---|---|
import | LuxDirectivesModule |
selector | luxTabIndex |
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. |
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>
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>
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>
-
Versionen