@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.
Files changed (217) hide show
  1. package/cheat-sheet.html +66 -92
  2. package/custom-elements.json +145 -144
  3. package/dist/cjs/kol-accordion.cjs.entry.js.map +1 -1
  4. package/dist/cjs/kol-alert.cjs.entry.js.map +1 -1
  5. package/dist/cjs/kol-badge.cjs.entry.js.map +1 -1
  6. package/dist/cjs/kol-breadcrumb.cjs.entry.js.map +1 -1
  7. package/dist/cjs/kol-button-link.cjs.entry.js.map +1 -1
  8. package/dist/cjs/kol-button-wc_3.cjs.entry.js.map +1 -1
  9. package/dist/cjs/kol-button.cjs.entry.js.map +1 -1
  10. package/dist/cjs/kol-card.cjs.entry.js.map +1 -1
  11. package/dist/cjs/kol-form.cjs.entry.js.map +1 -1
  12. package/dist/cjs/kol-icon.cjs.entry.js.map +1 -1
  13. package/dist/cjs/kol-image.cjs.entry.js.map +1 -1
  14. package/dist/cjs/kol-input-checkbox.cjs.entry.js.map +1 -1
  15. package/dist/cjs/kol-input-color.cjs.entry.js.map +1 -1
  16. package/dist/cjs/kol-input-date.cjs.entry.js.map +1 -1
  17. package/dist/cjs/kol-input-email.cjs.entry.js.map +1 -1
  18. package/dist/cjs/kol-input-file.cjs.entry.js.map +1 -1
  19. package/dist/cjs/kol-input-number.cjs.entry.js.map +1 -1
  20. package/dist/cjs/kol-input-password.cjs.entry.js.map +1 -1
  21. package/dist/cjs/kol-input-radio-group.cjs.entry.js.map +1 -1
  22. package/dist/cjs/kol-input-radio.cjs.entry.js.map +1 -1
  23. package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
  24. package/dist/cjs/kol-input-range.cjs.entry.js.map +1 -1
  25. package/dist/cjs/kol-input-text.cjs.entry.js.map +1 -1
  26. package/dist/cjs/kol-link-button.cjs.entry.js.map +1 -1
  27. package/dist/cjs/kol-link-group.cjs.entry.js.map +1 -1
  28. package/dist/cjs/kol-link-wc.cjs.entry.js.map +1 -1
  29. package/dist/cjs/kol-link.cjs.entry.js.map +1 -1
  30. package/dist/cjs/kol-modal.cjs.entry.js.map +1 -1
  31. package/dist/cjs/kol-nav.cjs.entry.js.map +1 -1
  32. package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
  33. package/dist/cjs/kol-pagination.cjs.entry.js.map +1 -1
  34. package/dist/cjs/kol-progress.cjs.entry.js.map +1 -1
  35. package/dist/cjs/kol-quote.cjs.entry.js.map +1 -1
  36. package/dist/cjs/kol-select.cjs.entry.js.map +1 -1
  37. package/dist/cjs/kol-skip-nav.cjs.entry.js.map +1 -1
  38. package/dist/cjs/kol-span-wc.cjs.entry.js.map +1 -1
  39. package/dist/cjs/kol-span.cjs.entry.js.map +1 -1
  40. package/dist/cjs/kol-tabs.cjs.entry.js.map +1 -1
  41. package/dist/cjs/kol-textarea.cjs.entry.js.map +1 -1
  42. package/dist/cjs/kol-toast.cjs.entry.js.map +1 -1
  43. package/dist/cjs/kol-tooltip.cjs.entry.js.map +1 -1
  44. package/dist/components/component.js.map +1 -1
  45. package/dist/components/component11.js.map +1 -1
  46. package/dist/components/component12.js.map +1 -1
  47. package/dist/components/component13.js.map +1 -1
  48. package/dist/components/component14.js +1 -1
  49. package/dist/components/component14.js.map +1 -1
  50. package/dist/components/component15.js.map +1 -1
  51. package/dist/components/component2.js.map +1 -1
  52. package/dist/components/component3.js.map +1 -1
  53. package/dist/components/component4.js.map +1 -1
  54. package/dist/components/component5.js.map +1 -1
  55. package/dist/components/component6.js.map +1 -1
  56. package/dist/components/component7.js.map +1 -1
  57. package/dist/components/component8.js.map +1 -1
  58. package/dist/components/kol-accordion.js.map +1 -1
  59. package/dist/components/kol-breadcrumb.js.map +1 -1
  60. package/dist/components/kol-button-link.js.map +1 -1
  61. package/dist/components/kol-card.js.map +1 -1
  62. package/dist/components/kol-form.js.map +1 -1
  63. package/dist/components/kol-image.js.map +1 -1
  64. package/dist/components/kol-input-checkbox.js.map +1 -1
  65. package/dist/components/kol-input-color.js.map +1 -1
  66. package/dist/components/kol-input-date.js.map +1 -1
  67. package/dist/components/kol-input-email.js.map +1 -1
  68. package/dist/components/kol-input-file.js.map +1 -1
  69. package/dist/components/kol-input-password.js.map +1 -1
  70. package/dist/components/kol-input-radio-group.js.map +1 -1
  71. package/dist/components/kol-input-range.js +1 -1
  72. package/dist/components/kol-input-range.js.map +1 -1
  73. package/dist/components/kol-input-text.js.map +1 -1
  74. package/dist/components/kol-link-button.js.map +1 -1
  75. package/dist/components/kol-link-group.js.map +1 -1
  76. package/dist/components/kol-modal.js.map +1 -1
  77. package/dist/components/kol-nav.js.map +1 -1
  78. package/dist/components/kol-progress.js.map +1 -1
  79. package/dist/components/kol-quote.js.map +1 -1
  80. package/dist/components/kol-skip-nav.js.map +1 -1
  81. package/dist/components/kol-span.js.map +1 -1
  82. package/dist/components/kol-tabs.js.map +1 -1
  83. package/dist/components/kol-textarea.js.map +1 -1
  84. package/dist/components/kol-toast.js.map +1 -1
  85. package/dist/components/shadow.js.map +1 -1
  86. package/dist/components/shadow2.js.map +1 -1
  87. package/dist/esm/kol-accordion.entry.js.map +1 -1
  88. package/dist/esm/kol-alert.entry.js.map +1 -1
  89. package/dist/esm/kol-badge.entry.js.map +1 -1
  90. package/dist/esm/kol-breadcrumb.entry.js.map +1 -1
  91. package/dist/esm/kol-button-link.entry.js.map +1 -1
  92. package/dist/esm/kol-button-wc_3.entry.js.map +1 -1
  93. package/dist/esm/kol-button.entry.js.map +1 -1
  94. package/dist/esm/kol-card.entry.js.map +1 -1
  95. package/dist/esm/kol-form.entry.js.map +1 -1
  96. package/dist/esm/kol-icon.entry.js.map +1 -1
  97. package/dist/esm/kol-image.entry.js.map +1 -1
  98. package/dist/esm/kol-input-checkbox.entry.js.map +1 -1
  99. package/dist/esm/kol-input-color.entry.js.map +1 -1
  100. package/dist/esm/kol-input-date.entry.js.map +1 -1
  101. package/dist/esm/kol-input-email.entry.js.map +1 -1
  102. package/dist/esm/kol-input-file.entry.js.map +1 -1
  103. package/dist/esm/kol-input-number.entry.js.map +1 -1
  104. package/dist/esm/kol-input-password.entry.js.map +1 -1
  105. package/dist/esm/kol-input-radio-group.entry.js.map +1 -1
  106. package/dist/esm/kol-input-radio.entry.js.map +1 -1
  107. package/dist/esm/kol-input-range.entry.js +1 -1
  108. package/dist/esm/kol-input-range.entry.js.map +1 -1
  109. package/dist/esm/kol-input-text.entry.js.map +1 -1
  110. package/dist/esm/kol-link-button.entry.js.map +1 -1
  111. package/dist/esm/kol-link-group.entry.js.map +1 -1
  112. package/dist/esm/kol-link-wc.entry.js.map +1 -1
  113. package/dist/esm/kol-link.entry.js.map +1 -1
  114. package/dist/esm/kol-modal.entry.js.map +1 -1
  115. package/dist/esm/kol-nav.entry.js.map +1 -1
  116. package/dist/esm/kol-pagination.entry.js +1 -1
  117. package/dist/esm/kol-pagination.entry.js.map +1 -1
  118. package/dist/esm/kol-progress.entry.js.map +1 -1
  119. package/dist/esm/kol-quote.entry.js.map +1 -1
  120. package/dist/esm/kol-select.entry.js.map +1 -1
  121. package/dist/esm/kol-skip-nav.entry.js.map +1 -1
  122. package/dist/esm/kol-span-wc.entry.js.map +1 -1
  123. package/dist/esm/kol-span.entry.js.map +1 -1
  124. package/dist/esm/kol-tabs.entry.js.map +1 -1
  125. package/dist/esm/kol-textarea.entry.js.map +1 -1
  126. package/dist/esm/kol-toast.entry.js.map +1 -1
  127. package/dist/esm/kol-tooltip.entry.js.map +1 -1
  128. package/dist/kolibri/kol-accordion.entry.js.map +1 -1
  129. package/dist/kolibri/kol-alert.entry.js.map +1 -1
  130. package/dist/kolibri/kol-badge.entry.js.map +1 -1
  131. package/dist/kolibri/kol-breadcrumb.entry.js.map +1 -1
  132. package/dist/kolibri/kol-button-link.entry.js.map +1 -1
  133. package/dist/kolibri/kol-button-wc_3.entry.js.map +1 -1
  134. package/dist/kolibri/kol-button.entry.js.map +1 -1
  135. package/dist/kolibri/kol-card.entry.js.map +1 -1
  136. package/dist/kolibri/kol-form.entry.js.map +1 -1
  137. package/dist/kolibri/kol-icon.entry.js.map +1 -1
  138. package/dist/kolibri/kol-image.entry.js.map +1 -1
  139. package/dist/kolibri/kol-input-checkbox.entry.js.map +1 -1
  140. package/dist/kolibri/kol-input-color.entry.js.map +1 -1
  141. package/dist/kolibri/kol-input-date.entry.js.map +1 -1
  142. package/dist/kolibri/kol-input-email.entry.js.map +1 -1
  143. package/dist/kolibri/kol-input-file.entry.js.map +1 -1
  144. package/dist/kolibri/kol-input-number.entry.js.map +1 -1
  145. package/dist/kolibri/kol-input-password.entry.js.map +1 -1
  146. package/dist/kolibri/kol-input-radio-group.entry.js.map +1 -1
  147. package/dist/kolibri/kol-input-radio.entry.js.map +1 -1
  148. package/dist/kolibri/kol-input-range.entry.js +1 -1
  149. package/dist/kolibri/kol-input-range.entry.js.map +1 -1
  150. package/dist/kolibri/kol-input-text.entry.js.map +1 -1
  151. package/dist/kolibri/kol-link-button.entry.js.map +1 -1
  152. package/dist/kolibri/kol-link-group.entry.js.map +1 -1
  153. package/dist/kolibri/kol-link-wc.entry.js.map +1 -1
  154. package/dist/kolibri/kol-link.entry.js.map +1 -1
  155. package/dist/kolibri/kol-modal.entry.js.map +1 -1
  156. package/dist/kolibri/kol-nav.entry.js.map +1 -1
  157. package/dist/kolibri/kol-pagination.entry.js +1 -1
  158. package/dist/kolibri/kol-pagination.entry.js.map +1 -1
  159. package/dist/kolibri/kol-progress.entry.js.map +1 -1
  160. package/dist/kolibri/kol-quote.entry.js.map +1 -1
  161. package/dist/kolibri/kol-select.entry.js.map +1 -1
  162. package/dist/kolibri/kol-skip-nav.entry.js.map +1 -1
  163. package/dist/kolibri/kol-span-wc.entry.js.map +1 -1
  164. package/dist/kolibri/kol-span.entry.js.map +1 -1
  165. package/dist/kolibri/kol-tabs.entry.js.map +1 -1
  166. package/dist/kolibri/kol-textarea.entry.js.map +1 -1
  167. package/dist/kolibri/kol-toast.entry.js.map +1 -1
  168. package/dist/kolibri/kol-tooltip.entry.js.map +1 -1
  169. package/dist/types/components.d.ts +290 -288
  170. package/doc/abbr.md +7 -3
  171. package/doc/accordion.md +50 -24
  172. package/doc/alert.md +7 -5
  173. package/doc/badge.md +16 -24
  174. package/doc/breadcrumb.md +10 -8
  175. package/doc/button-link.md +2 -2
  176. package/doc/button.md +39 -68
  177. package/doc/card.md +17 -61
  178. package/doc/details.md +12 -9
  179. package/doc/form.md +4 -4
  180. package/doc/heading.md +18 -11
  181. package/doc/icon.md +10 -14
  182. package/doc/image.md +27 -20
  183. package/doc/indented-text.md +1 -7
  184. package/doc/input-checkbox.md +14 -10
  185. package/doc/input-color.md +9 -12
  186. package/doc/input-date.md +10 -13
  187. package/doc/input-email.md +11 -10
  188. package/doc/input-file.md +9 -7
  189. package/doc/input-number.md +10 -39
  190. package/doc/input-password.md +8 -8
  191. package/doc/input-radio-group.md +4 -4
  192. package/doc/input-radio.md +26 -8
  193. package/doc/input-range.md +6 -9
  194. package/doc/input-text.md +15 -17
  195. package/doc/kolibri.md +10 -5
  196. package/doc/link-button.md +6 -11
  197. package/doc/link-group.md +20 -18
  198. package/doc/link.md +18 -39
  199. package/doc/logo.md +4 -8
  200. package/doc/modal.md +36 -54
  201. package/doc/nav.md +49 -37
  202. package/doc/pagination.md +17 -22
  203. package/doc/progress.md +7 -7
  204. package/doc/quote.md +11 -8
  205. package/doc/select.md +27 -18
  206. package/doc/skip-nav.md +10 -5
  207. package/doc/span.md +5 -5
  208. package/doc/spin.md +4 -5
  209. package/doc/table.md +7 -59
  210. package/doc/tabs.md +27 -39
  211. package/doc/textarea.md +28 -29
  212. package/doc/toast.md +15 -8
  213. package/doc/tooltip.md +7 -7
  214. package/doc/version.md +5 -8
  215. package/jest-test-results.json +1 -1
  216. package/package.json +1 -1
  217. package/vscode-custom-data.json +143 -143
@@ -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, die Pflichtfelder `id` und `name` korrekt zu setzen.
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` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
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` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
50
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
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` | Gibt an, ob die Eingabefeld nur lesend ist. | `boolean \| undefined` | `undefined` |
59
- | `_required` | `_required` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
60
- | `_size` | `_size` | Gibt an, wie viele Zeichen man eingeben kann. | `number \| undefined` | `undefined` |
61
- | `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `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` |
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` |
@@ -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` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
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` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
17
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
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` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
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` |
@@ -1,6 +1,6 @@
1
1
  # InputRadio
2
2
 
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.
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, die Pflichtfelder `id` und `name` korrekt zu setzen.
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 aus. |
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 alle Radio-Elemente und aktivieren das gerade fokussierte Element. |
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` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
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` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
75
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
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` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
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` |
@@ -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="{100}" _max="{200}" _step="{10}"> Wertebereich </kol-input-range>
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={100} _max={200} _step={10}>
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, die Pflichtfelder `id` und `name` korrekt zu setzen.
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` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
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` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
52
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
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"> Texteingabe </kol-input-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
- Texteingabe
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, die Pflichtfelder `id` und `name` korrekt zu setzen.
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` | Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist. | `boolean \| undefined` | `undefined` |
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` | Gibt an, ob das Eingabefeld kein sichtbares Label haben soll. | `boolean \| undefined` | `undefined` |
56
- | `_hint` | `_hint` | Gibt den Text für eine Hinweistext an. | `string \| undefined` | `''` |
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 Prüfpattern für das Eingabefeld an. | `string \| undefined` | `undefined` |
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` | Gibt an, ob die Eingabefeld nur lesend ist. | `boolean \| undefined` | `undefined` |
66
- | `_required` | `_required` | Gibt an, ob das Eingabefeld ein Pflichtfeld ist. | `boolean \| undefined` | `undefined` |
67
- | `_size` | `_size` | Gibt an, wie viele Zeichen man eingeben kann. | `number \| undefined` | `undefined` |
68
- | `_smartButton` | -- | Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only). | `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` |
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 _animate _labled />
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
- <kol-kolibri />
16
- <kol-kolibri _animate />
17
- <kol-kolibri _animate _labled="false" />
18
- <kol-kolibri _labled="false" />
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
 
@@ -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` | Gibt den Class-Identifier eines Icons eine eingebunden Icofont an. (z.B. https://icofont.com/) | `KoliBriHorizontalIcon & KoliBriVerticalIcon \| string \| undefined` | `undefined` |
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` | Gibt einen beschreibenden Text für das Text-Element an. | `string` | `undefined` |
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` | Gibt an, welche Role der Schalter hat. | `"button" \| "link" \| "tab" \| undefined` | `undefined` |
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` | Definiert das Verhalten, bei dem der Link geöffnet werden soll. | `string \| undefined` | `undefined` |
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. | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| undefined` | `'normal'` |
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 listenartige, vertikale oder horizontale Darstellung 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.
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 `_links` übergeben.
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
- ```html
30
- [ { _label: 'Link 1', _href: 'https://www.w3.org' }, { _label: 'Link 2', _href: 'https://www.w3.org' }, { _label: 'Link 3', _href: 'https://www.w3.org' }, ];
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 `_caption` übergeben.
39
+ Die Überschrift der LinkGroup wird über das Attribut **`_heading`** übergeben.
38
40
 
39
41
  ### Ausrichtung
40
42
 
41
- Über das Attribut `_orientation` kann die Ausrichtung der LinkGroup bestimmt werden. Standardwert ist `_orientation="vertical"`. Für eine horizontale Anzeige den Wert `horizontal` verwenden.
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 `_list-style-type` kann bestimmt werden, mit welchem Symbol die einzelnen Zeilen der Group dargestellt werden sollen. Es stehen vier Möglichkeiten zur Auswahl.
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 | Type | Default |
86
- | ------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
87
- | `_ariaLabel` _(required)_ | `_aria-label` | Gibt den Text an, der die Navigation von anderen Navigationen differenziert. | `string` | `undefined` |
88
- | `_heading` | `_heading` | Gibt die optionale Überschrift zur Link-Gruppe an. | `string \| undefined` | `undefined` |
89
- | `_level` | `_level` | Gibt die geordnete Liste der Seitenhierarchie in Links an. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `undefined` |
90
- | `_links` _(required)_ | `_links` | Gibt die geordnete Liste der Seitenhierarchie in Links an. | `LinkProps[] \| string` | `undefined` |
91
- | `_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` |
92
- | `_ordered` | `_ordered` | <span class="text-red-500">**[DEPRECATED]**</span> Wird mittels der Property _list-style-type automatisch gesteuert. Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.<br/><br/> | `boolean \| undefined` | `undefined` |
93
- | `_orientation` | `_orientation` | Gibt die Ausrichtung der LinkList an. | `"horizontal" \| "vertical" \| undefined` | `'vertical'` |
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