@public-ui/components 1.5.0-rc.11 → 1.5.0-rc.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cheat-sheet.html +66 -92
- package/custom-elements.json +145 -144
- package/dist/cjs/kol-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-button-link.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-button-wc_3.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-button.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-card.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-form.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-image.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-color.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-date.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-email.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-file.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-number.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-password.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-radio-group.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-range.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-text.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-link-button.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-link-group.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-link-wc.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-link.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-modal.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-nav.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
- package/dist/cjs/kol-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-progress.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-quote.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-select.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-skip-nav.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-span-wc.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-span.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-toast.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-tooltip.cjs.entry.js.map +1 -1
- package/dist/components/component.js.map +1 -1
- package/dist/components/component11.js.map +1 -1
- package/dist/components/component12.js.map +1 -1
- package/dist/components/component13.js.map +1 -1
- package/dist/components/component14.js +1 -1
- package/dist/components/component14.js.map +1 -1
- package/dist/components/component15.js.map +1 -1
- package/dist/components/component2.js.map +1 -1
- package/dist/components/component3.js.map +1 -1
- package/dist/components/component4.js.map +1 -1
- package/dist/components/component5.js.map +1 -1
- package/dist/components/component6.js.map +1 -1
- package/dist/components/component7.js.map +1 -1
- package/dist/components/component8.js.map +1 -1
- package/dist/components/kol-accordion.js.map +1 -1
- package/dist/components/kol-breadcrumb.js.map +1 -1
- package/dist/components/kol-button-link.js.map +1 -1
- package/dist/components/kol-card.js.map +1 -1
- package/dist/components/kol-form.js.map +1 -1
- package/dist/components/kol-image.js.map +1 -1
- package/dist/components/kol-input-checkbox.js.map +1 -1
- package/dist/components/kol-input-color.js.map +1 -1
- package/dist/components/kol-input-date.js.map +1 -1
- package/dist/components/kol-input-email.js.map +1 -1
- package/dist/components/kol-input-file.js.map +1 -1
- package/dist/components/kol-input-password.js.map +1 -1
- package/dist/components/kol-input-radio-group.js.map +1 -1
- package/dist/components/kol-input-range.js +1 -1
- package/dist/components/kol-input-range.js.map +1 -1
- package/dist/components/kol-input-text.js.map +1 -1
- package/dist/components/kol-link-button.js.map +1 -1
- package/dist/components/kol-link-group.js.map +1 -1
- package/dist/components/kol-modal.js.map +1 -1
- package/dist/components/kol-nav.js.map +1 -1
- package/dist/components/kol-progress.js.map +1 -1
- package/dist/components/kol-quote.js.map +1 -1
- package/dist/components/kol-skip-nav.js.map +1 -1
- package/dist/components/kol-span.js.map +1 -1
- package/dist/components/kol-tabs.js.map +1 -1
- package/dist/components/kol-textarea.js.map +1 -1
- package/dist/components/kol-toast.js.map +1 -1
- package/dist/components/shadow.js.map +1 -1
- package/dist/components/shadow2.js.map +1 -1
- package/dist/esm/kol-accordion.entry.js.map +1 -1
- package/dist/esm/kol-alert.entry.js.map +1 -1
- package/dist/esm/kol-badge.entry.js.map +1 -1
- package/dist/esm/kol-breadcrumb.entry.js.map +1 -1
- package/dist/esm/kol-button-link.entry.js.map +1 -1
- package/dist/esm/kol-button-wc_3.entry.js.map +1 -1
- package/dist/esm/kol-button.entry.js.map +1 -1
- package/dist/esm/kol-card.entry.js.map +1 -1
- package/dist/esm/kol-form.entry.js.map +1 -1
- package/dist/esm/kol-icon.entry.js.map +1 -1
- package/dist/esm/kol-image.entry.js.map +1 -1
- package/dist/esm/kol-input-checkbox.entry.js.map +1 -1
- package/dist/esm/kol-input-color.entry.js.map +1 -1
- package/dist/esm/kol-input-date.entry.js.map +1 -1
- package/dist/esm/kol-input-email.entry.js.map +1 -1
- package/dist/esm/kol-input-file.entry.js.map +1 -1
- package/dist/esm/kol-input-number.entry.js.map +1 -1
- package/dist/esm/kol-input-password.entry.js.map +1 -1
- package/dist/esm/kol-input-radio-group.entry.js.map +1 -1
- package/dist/esm/kol-input-radio.entry.js.map +1 -1
- package/dist/esm/kol-input-range.entry.js +1 -1
- package/dist/esm/kol-input-range.entry.js.map +1 -1
- package/dist/esm/kol-input-text.entry.js.map +1 -1
- package/dist/esm/kol-link-button.entry.js.map +1 -1
- package/dist/esm/kol-link-group.entry.js.map +1 -1
- package/dist/esm/kol-link-wc.entry.js.map +1 -1
- package/dist/esm/kol-link.entry.js.map +1 -1
- package/dist/esm/kol-modal.entry.js.map +1 -1
- package/dist/esm/kol-nav.entry.js.map +1 -1
- package/dist/esm/kol-pagination.entry.js +1 -1
- package/dist/esm/kol-pagination.entry.js.map +1 -1
- package/dist/esm/kol-progress.entry.js.map +1 -1
- package/dist/esm/kol-quote.entry.js.map +1 -1
- package/dist/esm/kol-select.entry.js.map +1 -1
- package/dist/esm/kol-skip-nav.entry.js.map +1 -1
- package/dist/esm/kol-span-wc.entry.js.map +1 -1
- package/dist/esm/kol-span.entry.js.map +1 -1
- package/dist/esm/kol-tabs.entry.js.map +1 -1
- package/dist/esm/kol-textarea.entry.js.map +1 -1
- package/dist/esm/kol-toast.entry.js.map +1 -1
- package/dist/esm/kol-tooltip.entry.js.map +1 -1
- package/dist/kolibri/kol-accordion.entry.js.map +1 -1
- package/dist/kolibri/kol-alert.entry.js.map +1 -1
- package/dist/kolibri/kol-badge.entry.js.map +1 -1
- package/dist/kolibri/kol-breadcrumb.entry.js.map +1 -1
- package/dist/kolibri/kol-button-link.entry.js.map +1 -1
- package/dist/kolibri/kol-button-wc_3.entry.js.map +1 -1
- package/dist/kolibri/kol-button.entry.js.map +1 -1
- package/dist/kolibri/kol-card.entry.js.map +1 -1
- package/dist/kolibri/kol-form.entry.js.map +1 -1
- package/dist/kolibri/kol-icon.entry.js.map +1 -1
- package/dist/kolibri/kol-image.entry.js.map +1 -1
- package/dist/kolibri/kol-input-checkbox.entry.js.map +1 -1
- package/dist/kolibri/kol-input-color.entry.js.map +1 -1
- package/dist/kolibri/kol-input-date.entry.js.map +1 -1
- package/dist/kolibri/kol-input-email.entry.js.map +1 -1
- package/dist/kolibri/kol-input-file.entry.js.map +1 -1
- package/dist/kolibri/kol-input-number.entry.js.map +1 -1
- package/dist/kolibri/kol-input-password.entry.js.map +1 -1
- package/dist/kolibri/kol-input-radio-group.entry.js.map +1 -1
- package/dist/kolibri/kol-input-radio.entry.js.map +1 -1
- package/dist/kolibri/kol-input-range.entry.js +1 -1
- package/dist/kolibri/kol-input-range.entry.js.map +1 -1
- package/dist/kolibri/kol-input-text.entry.js.map +1 -1
- package/dist/kolibri/kol-link-button.entry.js.map +1 -1
- package/dist/kolibri/kol-link-group.entry.js.map +1 -1
- package/dist/kolibri/kol-link-wc.entry.js.map +1 -1
- package/dist/kolibri/kol-link.entry.js.map +1 -1
- package/dist/kolibri/kol-modal.entry.js.map +1 -1
- package/dist/kolibri/kol-nav.entry.js.map +1 -1
- package/dist/kolibri/kol-pagination.entry.js +1 -1
- package/dist/kolibri/kol-pagination.entry.js.map +1 -1
- package/dist/kolibri/kol-progress.entry.js.map +1 -1
- package/dist/kolibri/kol-quote.entry.js.map +1 -1
- package/dist/kolibri/kol-select.entry.js.map +1 -1
- package/dist/kolibri/kol-skip-nav.entry.js.map +1 -1
- package/dist/kolibri/kol-span-wc.entry.js.map +1 -1
- package/dist/kolibri/kol-span.entry.js.map +1 -1
- package/dist/kolibri/kol-tabs.entry.js.map +1 -1
- package/dist/kolibri/kol-textarea.entry.js.map +1 -1
- package/dist/kolibri/kol-toast.entry.js.map +1 -1
- package/dist/kolibri/kol-tooltip.entry.js.map +1 -1
- package/dist/types/components.d.ts +290 -288
- package/doc/abbr.md +7 -3
- package/doc/accordion.md +50 -24
- package/doc/alert.md +7 -5
- package/doc/badge.md +16 -24
- package/doc/breadcrumb.md +10 -8
- package/doc/button-link.md +2 -2
- package/doc/button.md +39 -68
- package/doc/card.md +17 -61
- package/doc/details.md +12 -9
- package/doc/form.md +4 -4
- package/doc/heading.md +18 -11
- package/doc/icon.md +10 -14
- package/doc/image.md +27 -20
- package/doc/indented-text.md +1 -7
- package/doc/input-checkbox.md +14 -10
- package/doc/input-color.md +9 -12
- package/doc/input-date.md +10 -13
- package/doc/input-email.md +11 -10
- package/doc/input-file.md +9 -7
- package/doc/input-number.md +10 -39
- package/doc/input-password.md +8 -8
- package/doc/input-radio-group.md +4 -4
- package/doc/input-radio.md +26 -8
- package/doc/input-range.md +6 -9
- package/doc/input-text.md +15 -17
- package/doc/kolibri.md +10 -5
- package/doc/link-button.md +6 -11
- package/doc/link-group.md +20 -18
- package/doc/link.md +18 -39
- package/doc/logo.md +4 -8
- package/doc/modal.md +36 -54
- package/doc/nav.md +49 -37
- package/doc/pagination.md +17 -22
- package/doc/progress.md +7 -7
- package/doc/quote.md +11 -8
- package/doc/select.md +27 -18
- package/doc/skip-nav.md +10 -5
- package/doc/span.md +5 -5
- package/doc/spin.md +4 -5
- package/doc/table.md +7 -59
- package/doc/tabs.md +27 -39
- package/doc/textarea.md +28 -29
- package/doc/toast.md +15 -8
- package/doc/tooltip.md +7 -7
- package/doc/version.md +5 -8
- package/jest-test-results.json +1 -1
- package/package.json +1 -1
- package/vscode-custom-data.json +143 -143
package/doc/input-password.md
CHANGED
|
@@ -20,7 +20,7 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
|
|
|
20
20
|
|
|
21
21
|
### Best practices
|
|
22
22
|
|
|
23
|
-
- Achten sie darauf
|
|
23
|
+
- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
|
|
24
24
|
|
|
25
25
|
## Barrierefreiheit
|
|
26
26
|
|
|
@@ -44,10 +44,10 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
|
|
|
44
44
|
| `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
|
|
45
45
|
| `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
|
|
46
46
|
| `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
|
|
47
|
-
| `_disabled` | `_disabled` |
|
|
47
|
+
| `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
|
|
48
48
|
| `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
|
|
49
|
-
| `_hideLabel` | `_hide-label` |
|
|
50
|
-
| `_hint` | `_hint` | Gibt den
|
|
49
|
+
| `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
|
|
50
|
+
| `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
|
|
51
51
|
| `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
|
|
52
52
|
| `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
53
53
|
| `_maxLength` | `_max-length` | Gibt an, wie viele Zeichen man maximal eingeben kann. | `number \| undefined` | `undefined` |
|
|
@@ -55,10 +55,10 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
|
|
|
55
55
|
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
|
|
56
56
|
| `_pattern` | `_pattern` | Gibt ein Prüfpattern für das Eingabefeld an. | `string \| undefined` | `undefined` |
|
|
57
57
|
| `_placeholder` | `_placeholder` | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist. | `string \| undefined` | `undefined` |
|
|
58
|
-
| `_readOnly` | `_read-only` |
|
|
59
|
-
| `_required` | `_required` |
|
|
60
|
-
| `_size` | `_size` |
|
|
61
|
-
| `_smartButton` | -- | Ermöglicht
|
|
58
|
+
| `_readOnly` | `_read-only` | Setzt das Eingabefeld in den schreibgeschützten Modus. | `boolean \| undefined` | `undefined` |
|
|
59
|
+
| `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
|
|
60
|
+
| `_size` | `_size` | Setzt die Breite des Eingabefeldes in Buchstabenbreiten. | `number \| undefined` | `undefined` |
|
|
61
|
+
| `_smartButton` | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
|
|
62
62
|
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
|
|
63
63
|
| `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
|
|
64
64
|
| `_value` | `_value` | Gibt den Wert des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
package/doc/input-radio-group.md
CHANGED
|
@@ -11,16 +11,16 @@
|
|
|
11
11
|
| -------------------- | -------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ------------ |
|
|
12
12
|
| `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
|
|
13
13
|
| `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
|
|
14
|
-
| `_disabled` | `_disabled` |
|
|
14
|
+
| `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
|
|
15
15
|
| `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
|
|
16
|
-
| `_hideLabel` | `_hide-label` |
|
|
17
|
-
| `_hint` | `_hint` | Gibt den
|
|
16
|
+
| `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
|
|
17
|
+
| `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
|
|
18
18
|
| `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
19
19
|
| `_list` _(required)_ | `_list` | Gibt die Liste der Optionen für das Eingabefeld an. | `Option<W3CInputValue>[] \| string` | `undefined` |
|
|
20
20
|
| `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
21
21
|
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
|
|
22
22
|
| `_orientation` | `_orientation` | Gibt die Ausrichtung der LinkList an. | `"horizontal" \| "vertical" \| undefined` | `'vertical'` |
|
|
23
|
-
| `_required` | `_required` |
|
|
23
|
+
| `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
|
|
24
24
|
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
|
|
25
25
|
| `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
|
|
26
26
|
| `_value` | `_value` | Gibt den Wert der Radio an. | `number \| string \| undefined` | `undefined` |
|
package/doc/input-radio.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# InputRadio
|
|
2
2
|
|
|
3
|
-
Die Komponente **
|
|
3
|
+
Die Komponente **InputRadio** besteht aus einer Sammlung von Radio-Elementen und stellt so eine Auswahlmöglichkeit zwischen verschiedenen Werten dar. Es kann immer nur ein einzelner Wert zur gleichen Zeit ausgewählt werden. Ausgewählte Radio-Elemente werden i.d.R. mit einem gefüllten und optisch hervorgehobenen Kreis dargestellt.
|
|
4
4
|
|
|
5
5
|
<kol-alert _alert _heading="Hinweis" _level="1" _type="info">
|
|
6
6
|
Das Input-Radio dient der Abbildung einer Auswahlmöglichkeit bei der mindestens und maximal eine Auswahl getroffen werden kann. Das bedeutet, dass ein Input-Radio nicht einzeln vorkommen kann. Aufgrund dessen haben wir die Komponente als Listen-Komponente umgesetzt.
|
|
@@ -38,9 +38,27 @@ Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
|
|
|
38
38
|
[ { label: 'Herr', value: 'Herr', }, { label: 'Frau', value: 'Frau', }, { label: 'Firma', value: 'Firma', }, ];
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
+
### onChange
|
|
42
|
+
|
|
43
|
+
Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und der Wert des ausgewählten RadioButtons.
|
|
44
|
+
<kol-alert _heading="Hinweis für Versionen <2" _type="info">event.target.value enthält die Nummer der Checkbox mit einem '-' davor.</kol-alert>
|
|
45
|
+
|
|
46
|
+
```jsx
|
|
47
|
+
<kol-input-radio
|
|
48
|
+
_id="anrede"
|
|
49
|
+
_name="anrede"
|
|
50
|
+
_list={[
|
|
51
|
+
{ label: 'Herr', value: 'Herr' },
|
|
52
|
+
{ label: 'Frau', value: 'Frau' },
|
|
53
|
+
{ label: 'Firma', value: 'Firma' },
|
|
54
|
+
]}
|
|
55
|
+
_on={{ onChange: (_event, value) => setValue(value) }}
|
|
56
|
+
></kol-input-radio>
|
|
57
|
+
```
|
|
58
|
+
|
|
41
59
|
### Best practices
|
|
42
60
|
|
|
43
|
-
- Achten sie darauf
|
|
61
|
+
- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
|
|
44
62
|
- Es wird immer mindestens ein Wert ausgewählt. Ähnlich dem Verhalten einer Select-Auswahl. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#selecting_a_radio_button_by_default)
|
|
45
63
|
|
|
46
64
|
## Barrierefreiheit
|
|
@@ -49,9 +67,9 @@ Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
|
|
|
49
67
|
|
|
50
68
|
| Taste | Funktion |
|
|
51
69
|
| -------------- | ------------------------------------------------------------------------------------------------ |
|
|
52
|
-
| `Tab` | Fokussiert das erste Radio-Element, aktiviert es aber nicht
|
|
70
|
+
| `Tab` | Fokussiert das erste Radio-Element, aktiviert es aber nicht. |
|
|
53
71
|
| `Leer` | Aktiviert das erste Radio-Element, nachdem die RadioGroup über die Tab-Taste angesprungen wurde. |
|
|
54
|
-
| `Pfeil-Tasten` | Durchlaufen
|
|
72
|
+
| `Pfeil-Tasten` | Durchlaufen aller Radio-Elemente und aktiviert das gerade fokussierte Element. |
|
|
55
73
|
|
|
56
74
|
## Links und Referenzen
|
|
57
75
|
|
|
@@ -69,16 +87,16 @@ Beispiel für die Erstellung des JSON-Objekts zur Definition der Radio-Elemente:
|
|
|
69
87
|
| -------------------- | -------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ------------ |
|
|
70
88
|
| `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
|
|
71
89
|
| `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
|
|
72
|
-
| `_disabled` | `_disabled` |
|
|
90
|
+
| `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
|
|
73
91
|
| `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
|
|
74
|
-
| `_hideLabel` | `_hide-label` |
|
|
75
|
-
| `_hint` | `_hint` | Gibt den
|
|
92
|
+
| `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
|
|
93
|
+
| `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
|
|
76
94
|
| `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
77
95
|
| `_list` _(required)_ | `_list` | Gibt die Liste der Optionen für das Eingabefeld an. | `Option<W3CInputValue>[] \| string` | `undefined` |
|
|
78
96
|
| `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
79
97
|
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
|
|
80
98
|
| `_orientation` | `_orientation` | Gibt die Ausrichtung der LinkList an. | `"horizontal" \| "vertical" \| undefined` | `'vertical'` |
|
|
81
|
-
| `_required` | `_required` |
|
|
99
|
+
| `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
|
|
82
100
|
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
|
|
83
101
|
| `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
|
|
84
102
|
| `_value` | `_value` | Gibt den Wert der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902) | `number \| string \| undefined` | `undefined` |
|
package/doc/input-range.md
CHANGED
|
@@ -7,20 +7,18 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
|
|
|
7
7
|
### Code
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<kol-input-range _id="meine_range" _name="meine_range" _min="
|
|
10
|
+
<kol-input-range _id="meine_range" _name="meine_range" _min="100" _max="200" _value="100" _step="20">Wertebereich</kol-input-range>
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
### Beispiel
|
|
14
14
|
|
|
15
|
-
<kol-input-range _id="meine_range" _name="meine_range" _min=
|
|
16
|
-
Wertebereich
|
|
17
|
-
</kol-input-range>
|
|
15
|
+
<kol-input-range _id="meine_range" _name="meine_range" _min="100" _max="200" _value="100" _step="20">Wertebereich</kol-input-range>
|
|
18
16
|
|
|
19
17
|
## Verwendung
|
|
20
18
|
|
|
21
19
|
### Best practices
|
|
22
20
|
|
|
23
|
-
- Achten sie darauf
|
|
21
|
+
- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
|
|
24
22
|
|
|
25
23
|
## Barrierefreiheit
|
|
26
24
|
|
|
@@ -34,7 +32,6 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
|
|
|
34
32
|
## Links und Referenzen
|
|
35
33
|
|
|
36
34
|
- https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109
|
|
37
|
-
- https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/
|
|
38
35
|
|
|
39
36
|
<!-- Auto Generated Below -->
|
|
40
37
|
|
|
@@ -46,10 +43,10 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
|
|
|
46
43
|
| `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
|
|
47
44
|
| `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
|
|
48
45
|
| `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
|
|
49
|
-
| `_disabled` | `_disabled` |
|
|
46
|
+
| `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
|
|
50
47
|
| `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
|
|
51
|
-
| `_hideLabel` | `_hide-label` |
|
|
52
|
-
| `_hint` | `_hint` | Gibt den
|
|
48
|
+
| `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
|
|
49
|
+
| `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
|
|
53
50
|
| `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
|
|
54
51
|
| `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
55
52
|
| `_list` | `_list` | Gibt die Liste der Vorschlagswörter an. | `Option<number>[] \| string \| undefined` | `undefined` |
|
package/doc/input-text.md
CHANGED
|
@@ -7,24 +7,22 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
|
|
|
7
7
|
### Code
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<kol-input-text _type="text" _id="mein_text" _name="mein_text">
|
|
10
|
+
<kol-input-text _type="text" _id="mein_text" _name="mein_text">Texteingabe</kol-input-text>
|
|
11
|
+
<kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
|
|
12
|
+
<kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
|
|
11
13
|
```
|
|
12
14
|
|
|
13
15
|
### Beispiel
|
|
14
16
|
|
|
15
|
-
<kol-input-text _type="text" _id="mein_text" _name="mein_text">
|
|
16
|
-
|
|
17
|
-
</kol-input-text>
|
|
18
|
-
|
|
19
|
-
<kol-input-text _type="text" _id="mein_text" _name="mein_text" _disabled>
|
|
20
|
-
Texteingabe
|
|
21
|
-
</kol-input-text>
|
|
17
|
+
<kol-input-text _type="text" _id="mein_text" _name="mein_text">Texteingabe</kol-input-text>
|
|
18
|
+
<kol-input-text _type="text" _id="deaktiviert" _name="deaktiviert" _disabled>Deaktiviert</kol-input-text>
|
|
19
|
+
<kol-input-text _type="text" _id="schreibgeschützt" _name="schreibgeschützt" _read-only>Schreibgeschützt</kol-input-text>
|
|
22
20
|
|
|
23
21
|
## Verwendung
|
|
24
22
|
|
|
25
23
|
### Best practices
|
|
26
24
|
|
|
27
|
-
- Achten sie darauf
|
|
25
|
+
- Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
|
|
28
26
|
|
|
29
27
|
## Barrierefreiheit
|
|
30
28
|
|
|
@@ -50,22 +48,22 @@ Texteingabe
|
|
|
50
48
|
| `_accessKey` | `_access-key` | Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann. | `string \| undefined` | `undefined` |
|
|
51
49
|
| `_alert` | `_alert` | Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt. | `boolean \| undefined` | `true` |
|
|
52
50
|
| `_autoComplete` | `_auto-complete` | Gibt an, ob das Eingabefeld autovervollständigt werden kann. | `"off" \| "on" \| undefined` | `undefined` |
|
|
53
|
-
| `_disabled` | `_disabled` |
|
|
51
|
+
| `_disabled` | `_disabled` | Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt. | `boolean \| undefined` | `undefined` |
|
|
54
52
|
| `_error` | `_error` | Gibt den Text für eine Fehlermeldung an. | `string \| undefined` | `undefined` |
|
|
55
|
-
| `_hideLabel` | `_hide-label` |
|
|
56
|
-
| `_hint` | `_hint` | Gibt den
|
|
53
|
+
| `_hideLabel` | `_hide-label` | Versteckt das sichtbare Label des Elements. | `boolean \| undefined` | `undefined` |
|
|
54
|
+
| `_hint` | `_hint` | Gibt den Hinweistext an. | `string \| undefined` | `''` |
|
|
57
55
|
| `_icon` | `_icon` | Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes. | `string \| undefined \| { right?: IconOrIconClass \| undefined; left?: IconOrIconClass \| undefined; }` | `undefined` |
|
|
58
56
|
| `_id` | `_id` | Gibt die technische ID des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
59
57
|
| `_list` | `_list` | Gibt die Liste der Vorschlagswörter an. | `string \| string[] \| undefined` | `undefined` |
|
|
60
58
|
| `_maxLength` | `_max-length` | Gibt an, wie viele Zeichen man maximal eingeben kann. | `number \| undefined` | `undefined` |
|
|
61
59
|
| `_name` | `_name` | Gibt den technischen Namen des Eingabefeldes an. | `string \| undefined` | `undefined` |
|
|
62
60
|
| `_on` | -- | Gibt die EventCallback-Funktionen für das Input-Event an. | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined` | `undefined` |
|
|
63
|
-
| `_pattern` | `_pattern` | Gibt ein
|
|
61
|
+
| `_pattern` | `_pattern` | Gibt ein Prüfmuster für das Eingabefeld an. | `string \| undefined` | `undefined` |
|
|
64
62
|
| `_placeholder` | `_placeholder` | Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist. | `string \| undefined` | `undefined` |
|
|
65
|
-
| `_readOnly` | `_read-only` |
|
|
66
|
-
| `_required` | `_required` |
|
|
67
|
-
| `_size` | `_size` |
|
|
68
|
-
| `_smartButton` | -- | Ermöglicht
|
|
63
|
+
| `_readOnly` | `_read-only` | Setzt das Eingabefeld in den schreibgeschützten Modus. | `boolean \| undefined` | `undefined` |
|
|
64
|
+
| `_required` | `_required` | Macht das Eingabeelement zu einem Pflichtfeld. | `boolean \| undefined` | `undefined` |
|
|
65
|
+
| `_size` | `_size` | Setzt die Breite des Eingabefeldes in Buchstabenbreiten. | `number \| undefined` | `undefined` |
|
|
66
|
+
| `_smartButton` | -- | Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label). | `undefined \| { _label: string; } & { _ariaControls?: string \| undefined; _ariaLabel?: string \| undefined; _icon?: Stringified<KoliBriIconProp> \| undefined; _iconAlign?: PropAlignment \| undefined; _iconOnly?: boolean \| undefined; _role?: AlternativButtonLinkRole \| undefined; _tabIndex?: number \| undefined; _tooltipAlign?: PropAlignment \| undefined; _ariaCurrent?: AriaCurrent \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _disabled?: boolean \| undefined; _accessKey?: string \| undefined; _id?: string \| undefined; _on?: KoliBriButtonCallbacks<unknown> \| undefined; _type?: KoliBriButtonType \| undefined; _value?: unknown; _variant?: KoliBriButtonVariant \| undefined; _customClass?: string \| undefined; }` | `undefined` |
|
|
69
67
|
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index dieses Input hat. | `number \| undefined` | `undefined` |
|
|
70
68
|
| `_touched` | `_touched` | Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde. | `boolean \| undefined` | `false` |
|
|
71
69
|
| `_type` | `_type` | Gibt an, ob es ein Text-, Suche-, URL- oder Telefon-Eingabefeld ist. | `"search" \| "tel" \| "text" \| "url" \| undefined` | `'text'` |
|
package/doc/kolibri.md
CHANGED
|
@@ -7,15 +7,20 @@ Diese Komponente implementiert das KoliBri-Logo.
|
|
|
7
7
|
### Code
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<kol-kolibri
|
|
10
|
+
<kol-kolibri />
|
|
11
|
+
<kol-kolibri _animate />
|
|
12
|
+
<kol-kolibri _animate _labeled="false" />
|
|
13
|
+
<kol-kolibri _labeled="false" />
|
|
11
14
|
```
|
|
12
15
|
|
|
13
16
|
## Beispiele
|
|
14
17
|
|
|
15
|
-
<
|
|
16
|
-
<kol-kolibri
|
|
17
|
-
<kol-kolibri _animate
|
|
18
|
-
<kol-kolibri
|
|
18
|
+
<div style="display: flex; justify-content: flex-start">
|
|
19
|
+
<kol-kolibri />
|
|
20
|
+
<kol-kolibri _animate />
|
|
21
|
+
<kol-kolibri _animate _labeled="false" />
|
|
22
|
+
<kol-kolibri _labeled="false" />
|
|
23
|
+
</div>
|
|
19
24
|
|
|
20
25
|
## Barrierefreiheit
|
|
21
26
|
|
package/doc/link-button.md
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
# LinkButton
|
|
2
2
|
|
|
3
3
|
Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert.
|
|
4
|
-
|
|
5
|
-
Einen Link kann man nicht deaktivieren und daher gibt es bei einem LinkButton nicht das Property `_disabled`.
|
|
6
|
-
|
|
7
|
-
Da es die Komponente ButtonLink gibt, die semantisch ein Button und optisch ein Link ist. Ist es nicht mehr notwendig den Click-Callback zu unterstützen. Das Property `_on` wird somit als `deprecated` markiert und wird mit dem nächsten Major-Release entfernt.
|
|
8
|
-
|
|
9
|
-
Ein Button hat aus UX-Sicht mehrere Varianten (`primary` oder `secondary` usw.). Damit der LinkButton das optisch gleich aussehen kann, wurden die Properties `_customClass` und `_variant` von der Button-Komponente übernommen.
|
|
4
|
+
Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/components/button" _label="Seite des Buttons"></kol-link>.
|
|
10
5
|
|
|
11
6
|
## Konstruktion
|
|
12
7
|
|
|
@@ -45,16 +40,16 @@ Ein Button hat aus UX-Sicht mehrere Varianten (`primary` oder `secondary` usw.).
|
|
|
45
40
|
| `_customClass` | `_custom-class` | Gibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist. | `string \| undefined` | `undefined` |
|
|
46
41
|
| `_disabled` | `_disabled` | Gibt an, ob der Link deaktiviert ist. | `boolean \| undefined` | `false` |
|
|
47
42
|
| `_href` _(required)_ | `_href` | Gibt die Ziel-Url des Links an. | `string` | `undefined` |
|
|
48
|
-
| `_icon` | `_icon` |
|
|
43
|
+
| `_icon` | `_icon` | Iconklasse (z.B.: "codicon codicon-home") | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined` | `undefined` |
|
|
49
44
|
| `_iconOnly` | `_icon-only` | Gibt an, ob nur das Icon angezeigt wird. | `boolean \| undefined` | `false` |
|
|
50
|
-
| `_label` _(required)_ | `_label` |
|
|
45
|
+
| `_label` _(required)_ | `_label` | Setzt den sichtbaren Text des Elements. | `string` | `undefined` |
|
|
51
46
|
| `_on` | -- | <span class="text-red-500">**[DEPRECATED]**</span> <br/><br/>Gibt die EventCallback-Funktionen für den Link an. | `undefined \| { onClick?: EventValueOrEventCallback<Event, string> \| undefined; }` | `undefined` |
|
|
52
|
-
| `_role` | `_role` |
|
|
47
|
+
| `_role` | `_role` | Setzt die Role der Schaltfläche. | `"button" \| "link" \| "tab" \| undefined` | `undefined` |
|
|
53
48
|
| `_tabIndex` | `_tab-index` | Gibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` |
|
|
54
|
-
| `_target` | `_target` |
|
|
49
|
+
| `_target` | `_target` | Gibt an wo der Link geöffnet werden soll. | `string \| undefined` | `undefined` |
|
|
55
50
|
| `_targetDescription` | `_target-description` | Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird. | `string \| undefined` | `translate('kol-open-link-in-tab')` |
|
|
56
51
|
| `_tooltipAlign` | `_tooltip-align` | Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'right'` |
|
|
57
|
-
| `_variant` | `_variant` | Gibt an, welche Ausprägung der Button hat.
|
|
52
|
+
| `_variant` | `_variant` | Gibt an, welche Ausprägung der Link-Button hat. | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| undefined` | `'normal'` |
|
|
58
53
|
|
|
59
54
|
|
|
60
55
|
## Dependencies
|
package/doc/link-group.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# LinkGroup
|
|
2
2
|
|
|
3
|
-
Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine
|
|
3
|
+
Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine vertikale oder horizontale Liste von Links. Sie rendert eine auf Barrierefreiheit optimierte Liste von Links, die als Text, als Icon oder auch in Kombination ausgegeben werden kann. Möglich ist auch die Ausgabe von versteckten Links.
|
|
4
4
|
|
|
5
5
|
## Konstruktion
|
|
6
6
|
|
|
@@ -24,25 +24,27 @@ Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine listen
|
|
|
24
24
|
|
|
25
25
|
### Links
|
|
26
26
|
|
|
27
|
-
Die auszugebenden Links werden als JSON-Objekt an das Attribut
|
|
27
|
+
Die auszugebenden Links werden als JSON-Objekt an das Attribut **`_links`** übergeben. Dort können die Attribute des <kol-link _href="" _label="Links"></kol-link> übergeben werden, **`_href`** und **`_label`** sind jedoch Pflicht.
|
|
28
28
|
|
|
29
|
-
```
|
|
30
|
-
[
|
|
29
|
+
```js
|
|
30
|
+
[
|
|
31
|
+
{ _label: 'Link 1', _href: 'https://www.w3.org' },
|
|
32
|
+
{ _label: 'Link 2', _href: 'https://www.w3.org' },
|
|
33
|
+
{ _label: 'Link 3', _href: 'https://www.w3.org' },
|
|
34
|
+
];
|
|
31
35
|
```
|
|
32
36
|
|
|
33
|
-
Die Konstruktion der einzelnen **Links**, die innerhalb der JSON-Struktur über das Attribut **\_links** übergeben wird, ist im Abschnitt **Links** beschrieben.
|
|
34
|
-
|
|
35
37
|
### Überschrift
|
|
36
38
|
|
|
37
|
-
Die Überschrift der LinkGroup wird über das Attribut
|
|
39
|
+
Die Überschrift der LinkGroup wird über das Attribut **`_heading`** übergeben.
|
|
38
40
|
|
|
39
41
|
### Ausrichtung
|
|
40
42
|
|
|
41
|
-
Über das Attribut
|
|
43
|
+
Über das Attribut **`_orientation`** kann die Ausrichtung der LinkGroup bestimmt werden. Mögliche Werte sind `horizontal` und `vertical` (Standard).
|
|
42
44
|
|
|
43
45
|
### List-Style-Type
|
|
44
46
|
|
|
45
|
-
Über das Attribut
|
|
47
|
+
Über das Attribut **`_list-style-type`** kann bestimmt werden, mit welchem Symbol die einzelnen Zeilen der Group dargestellt werden sollen. Es stehen diese vier Möglichkeiten zur Auswahl:
|
|
46
48
|
|
|
47
49
|
- `disc`
|
|
48
50
|
- `circle`
|
|
@@ -82,15 +84,15 @@ nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum
|
|
|
82
84
|
|
|
83
85
|
## Properties
|
|
84
86
|
|
|
85
|
-
| Property | Attribute | Description
|
|
86
|
-
| ------------------------- | ------------------ |
|
|
87
|
-
| `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert.
|
|
88
|
-
| `_heading` | `_heading` | Gibt die optionale Überschrift zur Link-Gruppe an.
|
|
89
|
-
| `_level` | `_level` |
|
|
90
|
-
| `_links` _(required)_ | `_links` |
|
|
91
|
-
| `_listStyleType` | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet
|
|
92
|
-
| `_ordered` | `_ordered` | <span class="text-red-500">**[DEPRECATED]**</span> Wird mittels der Property _list-style-type automatisch gesteuert
|
|
93
|
-
| `_orientation` | `_orientation` | Gibt die Ausrichtung der LinkList an.
|
|
87
|
+
| Property | Attribute | Description | Type | Default |
|
|
88
|
+
| ------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
|
|
89
|
+
| `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert. | `string` | `undefined` |
|
|
90
|
+
| `_heading` | `_heading` | Gibt die optionale Überschrift zur Link-Gruppe an. | `string \| undefined` | `undefined` |
|
|
91
|
+
| `_level` | `_level` | Setzt den H-Level, von 1 bis 6, der Überschrift. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `undefined` |
|
|
92
|
+
| `_links` _(required)_ | `_links` | Setzt die Liste der darzustellenden Links. | `LinkProps[] \| string` | `undefined` |
|
|
93
|
+
| `_listStyleType` | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet | `"circle" \| "decimal" \| "decimal-leading-zero" \| "disc" \| "lower-alpha" \| "lower-greek" \| "lower-latin" \| "lower-roman" \| "none" \| "square" \| "upper-alpha" \| "upper-latin" \| "upper-roman" \| undefined` | `undefined` |
|
|
94
|
+
| `_ordered` | `_ordered` | <span class="text-red-500">**[DEPRECATED]**</span> Wird mittels der Property _list-style-type automatisch gesteuert.<br/><br/>Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll. | `boolean \| undefined` | `undefined` |
|
|
95
|
+
| `_orientation` | `_orientation` | Gibt die Ausrichtung der LinkList an. | `"horizontal" \| "vertical" \| undefined` | `'vertical'` |
|
|
94
96
|
|
|
95
97
|
|
|
96
98
|
## Dependencies
|