Eigenschaften
Ziel ist, möglichst über alle Komponenten einheitliche Eigenschaften (Properties) zu verwenden, um die Erlernbarkeit zu erleichtern. Folgende Anforderungen sind dafür definiert:
- Nur ein Property-Name für gleichartige Eigenschaften
- Wenn möglich, einheitliche Beschreibungen bei gleichen Property-Namen
- Wenn möglich, einheitliche Typen bei gleichen Property-Namen
- Anzahl an unterschiedlichen Eigenschaften, Beschreibungen und Typen minimieren
Aktueller Stand
| # | Property | Components | Descriptions | Types |
|---|---|---|---|---|
| 1 | _label | abbr, accordion, alert, avatar, badge, breadcrumb, button, button-link, card, details, heading, icon, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, modal, nav, pagination, progress, quote, select, skip-nav, split-button, table, tabs, textarea, tree, tree-item, tree-item-wc, tree-wc | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. Defines the label of the tree. Defines the label of the link. | string |
| 2 | _tooltip-align | abbr, button, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, pagination, select, split-button, textarea | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" |
| 3 | _disabled | accordion, button, button-link, details, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, split-button, textarea | Makes the element not focusable and ignore all events. | boolean |
| 4 | _level | accordion, alert, card, heading | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | 0 | 1 | 2 | 3 | 4 | 5 | 6 |
| 5 | _open | accordion, details, tree-item, tree-item-wc | If set (to true) opens/expands the element, closes if not set (or set to false). | boolean |
| 6 | _alert | alert, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textarea | Defines whether the screen-readers should read out the notification. | boolean |
| 7 | _has-closer | alert, card | Defines whether the element can be closed. | boolean |
| 8 | _type | alert, button, button-link, input-date, input-text, split-button | Defines either the type of the component or of the components interactive element. | "default" | "error" | "info" | "success" | "warning" "button" | "reset" | "submit" "date" | "datetime-local" | "month" | "time" | "week" "search" | "tel" | "text" | "url" |
| 9 | _variant | alert, button, heading, input-checkbox, link-button, progress, quote, spin, split-button | Defines which variant should be used for presentation. | "card" | "msg" "custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary" "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "strong" "button" | "default" | "switch" "bar" | "cycle" "block" | "inline" "cycle" | "dot" | "none" |
| 10 | _src | avatar, image | Sets the image `src` attribute to the given string. | string |
| 11 | _color | badge | Defines the backgroundColor and foregroundColor. | string | { backgroundColor: string; foregroundColor: Stringified |
| 12 | _icons | badge, button, button-link, icon, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-range, input-text, link, link-button, select, split-button | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). | KoliBriHorizontalIcons & KoliBriVerticalIcons | string string string | { checked: string; indeterminate?: string; unchecked?: string; } | { checked?: string; indeterminate: string; unchecked?: string; } | { checked?: string; indeterminate?: string; unchecked: string; } string | { right?: IconOrIconClass; left?: IconOrIconClass; } |
| 13 | _smart-button | badge, input-color, input-date, input-email, input-file, input-number, input-password, input-text | Allows to add a button with an arbitrary action within the element (_hide-label only). | string | { _label: string; } & { _tabIndex?: number; _value?: Stringified |
| 14 | _links | breadcrumb, nav, skip-nav | Defines the list of links combined with their labels to render. Defines the list of links, buttons or texts to render. | BreadcrumbLinkProps[] | string ButtonOrLinkOrTextWithChildrenProps[] | string LinkProps[] | string |
| 15 | _access-key | button, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, textarea | Defines the elements access key. Defines which key combination can be used to trigger or focus the interactive element of the component. | string |
| 16 | _aria-controls | button, button-link, split-button | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string |
| 17 | _aria-expanded | button, button-link, split-button | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | boolean |
| 18 | _aria-selected | button, button-link, split-button | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | boolean |
| 19 | _custom-class | button, link-button, pagination, split-button | Defines the custom class attribute if _variant="custom" is set. | string |
| 20 | _id | button, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, split-button, textarea | Defines the internal ID of the primary component element. | string |
| 21 | _name | button, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, split-button, textarea | Defines the technical name of an input field. | string |
| 22 | _tab-index | button, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, split-button, textarea | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number |
| 23 | _value | button, button-link, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, progress, select, split-button, textarea | Defines the value that the button emits on click. Defines the value of the input. Defines the progress. | boolean | null | number | object | string string Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | null `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | null | number number W3CInputValue[] | string |
| 24 | _required-text | form | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. | boolean | string |
| 25 | _secondary-headline | heading | Defines the text of the secondary headline. | string |
| 26 | _loading | image | Defines the loading mode for the image. | "eager" | "lazy" |
| 27 | _sizes | image | Defines the image sizes for different screen resolutions, supporting _srcset. | string |
| 28 | _srcset | image | Setzt eine Liste von Quell-URLs mit Breiten der Bilder. | string |
| 29 | _checked | input-checkbox | Defines whether the checkbox is checked or not. Can be read and written. | boolean |
| 30 | _error | input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textarea | Defines the error message text. | string |
| 31 | _hide-error | input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textarea | Hides the error message but leaves it in the DOM for the input's aria-describedby. | boolean |
| 32 | _hint | input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textarea | Defines the hint text. | string |
| 33 | _indeterminate | input-checkbox | Puts the checkbox in the indeterminate state, does not change the value of _checked. | boolean |
| 34 | _required | input-checkbox, input-date, input-email, input-file, input-number, input-password, input-radio, input-text, select, textarea | Makes the input element required. | boolean |
| 35 | _touched | input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textarea | Shows if the input was touched by a user. | boolean |
| 36 | _auto-complete | input-color, input-date, input-email, input-number, input-password, input-range, input-text | Defines whether the input can be auto-completed. | "off" | "on" |
| 37 | _suggestions | input-color, input-date, input-email, input-number, input-range, input-text | Suggestions to provide for the input. | W3CInputValue[] | string |
| 38 | _max | input-date, input-number, input-range, pagination, progress | Defines the largest possible input value. Defines the maximum number of pages. Defines at which value the progress display is completed. | Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | number number |
| 39 | _min | input-date, input-number, input-range | Defines the smallest possible input value. | Date | `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` `${number}-${number}-${number}T${number}:${number}:${number}` | `${number}-${number}-${number}T${number}:${number}` | `${number}-${number}-${number}` | `${number}-${number}` | `${number}-W${number}` | `${number}:${number}:${number}` | `${number}:${number}` | number number |
| 40 | _read-only | input-date, input-email, input-number, input-password, input-text, textarea | Makes the input element read only. | boolean |
| 41 | _step | input-date, input-number, input-range | Defines the step size for value changes. | number |
| 42 | _has-counter | input-email, input-password, input-text, textarea | Shows the character count on the lower border of the input. | boolean |
| 43 | _max-length | input-email, input-password, input-text, textarea | Defines the maximum number of input characters. | number |
| 44 | _multiple | input-email, input-file, select | Makes the input accept multiple inputs. | boolean |
| 45 | _pattern | input-email, input-password, input-text | Defines a validation pattern for the input field. | string |
| 46 | _placeholder | input-email, input-number, input-password, input-text, textarea | Defines the placeholder for input field. To be shown when there's no value. | string |
| 47 | _accept | input-file | Defines which file formats are accepted. | string |
| 48 | _options | input-radio, select | Options the user can choose from. Options the user can choose from, also supporting Optgroup. | Option (Option |
| 49 | _orientation | input-radio, nav | Defines whether the orientation of the component is horizontal or vertical. | "horizontal" | "vertical" |
| 50 | _aria-current-value | link, link-button | Defines the value for the aria-current attribute. | "date" | "false" | "location" | "page" | "step" | "time" | "true" |
| 51 | _download | link, link-button | Tells the browser that the link contains a file. Optionally sets the filename. | string |
| 52 | _href | link, link-button, quote, tree-item, tree-item-wc | Sets the target URI of the link or citation source. Defines the target URI of the link. This property is used for a link from a reference to the target URL. | string |
| 53 | _target | link, link-button | Defines where to open the link. | string |
| 54 | _width | modal | Defines the width of the modal. (max-width: 100%) | string |
| 55 | _collapsible | nav | Defines if navigation nodes can be collapsed or not. Enabled by default. | boolean |
| 56 | _has-icons-when-expanded | nav | Shows icons next to the navigation item labels, even when the navigation is not collapsed. | boolean |
| 57 | _boundary-count | pagination | Defines the amount of pages to show next to the outer arrow buttons. | number |
| 58 | _has-buttons | pagination | Defines which navigation buttons to render (first, last, next, previous buttons). | boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; } |
| 59 | _page | pagination | Defines the current page. | number |
| 60 | _page-size | pagination | Defines the amount of entries to show per page. | number |
| 61 | _page-size-options | pagination | Defines the options for the page-size-select. | number[] | string |
| 62 | _sibling-count | pagination | Defines the amount of pages to show next to the current page. | number |
| 63 | _align | popover-wc, tabs | Defines the alignment of the tooltip, popover or tabs in relation to the element. Defines the position of the tab captions. | "bottom" | "left" | "right" | "top" |
| 64 | _show | popover-wc, spin | Makes the element show up. | boolean |
| 65 | _unit | progress | Defines the unit of the step values (not shown). | string |
| 66 | _quote | quote | Defines the text of the quote. | string |
| 67 | _rows | select, textarea | Defines how many rows of options should be visible at the same time. Defines how many rows of text should be visible at the same time. | number |
| 68 | _allow-multi-sort | table | Defines whether to allow multi sort. | boolean |
| 69 | _data | table | Defines the primary table data. | KoliBriTableDataType[] | string |
| 70 | _data-foot | table | Defines the data for the table footer. | KoliBriTableDataType[] | string |
| 71 | _headers | table | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; } |
| 72 | _min-width | table | Defines the table min-width. | string |
| 73 | _pagination | table | Defines whether to show the data distributed over multiple pages. | boolean | string | { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks; _page?: number; _max?: number; _boundaryCount?: number; _hasButtons?: boolean | Stringified |
| 74 | _pagination-position | table | Controls the position of the pagination. | "both" | "bottom" | "top" |
| 75 | _selected | tabs | Defines which tab is active. | number |
| 76 | _tabs | tabs | Defines the tab captions. | TabButtonProps[] | string |
| 77 | _adjust-height | textarea | Adjusts the height of the element to its content. | boolean |
| 78 | _resize | textarea | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) | "both" | "horizontal" | "none" | "vertical" |
| 79 | _active | tree-item, tree-item-wc | If set (to true) the tree item is the active one. | boolean |
| 80 | _hide-button | kol-pagination | Versteckt entweder den Zurück- oder Weiter-Schalter, oder beide Schalter. | "previous" | "next" | "both" |
Veraltete Eigenschaften
Die in der folgenden Tabelle aufgelisteten Eigenschaften lösen zahlreiche veraltete Eigenschaften (13 von 98, ~13%) ab.
| New Property | Deprecated Properties |
|---|---|
| _align | _tabs-align |
| _dataFoot | |
| _hide-button | _has-buttons (?) |
| _hide-label | _compact, _hide-label |
| _label | _alt, _aria-label, _caption, _heading, _headline, _summary, _symbol, _title |
| _max | _total |
| _row | _size |
| _variant | _type* |
| _show | _show-dropdown |
| _has-footer, _height, _icon-align, _list, _part, _role, _show-duration, _stealth, _selector, _useCase |
* Betrifft nur Typen, die eigentlich Varianten meinen.
Veraltete Komponenten
Mit der initialen Realisierung von KoliBri in Version 1 sind auch ein Paar Komponenten entstanden, die sich im Laufe der Zeit als nicht optimal erwiesen haben. Entweder sind Komponenten nicht gut verortet oder ihre Funktionsweise und Verwendung ist nicht gut. Diese Komponenten werden in Zukunft in Version 2 entweder in andere NPM-Pakete umziehen oder nicht mehr weiterentwickelt und sollten daher nicht mehr direkt aus KoliBri / Public-UI verwendet werden.
| New Component | Deprecated Components |
|---|---|
| avatar | |
| toolbar | |
| tree | |
| list | |
| button-group, icon-font-awesome, icon-icofont, input-radio-group, link-group, symbol |
* Betrifft nur Typen, die eigentlich Varianten meinen.
Weiter bestehende Komponenten
ButtonGroupwird durch die Umsetzung derToolbar-Komponente abgelöstLinkGroupwird durch die Umsetzung derList-Komponente abgelöstLogozieht in ein Bund-spezifisches Repository und NPM-Paket auf OpenCoDE um
Entfallende Komponenten
Alle anderen Komponenten werden mit der Version 2 ersatzlos gestrichen. Sie sind nicht mehr in der Dokumentation zu finden und werden auch nicht mehr über KoliBri / Public-UI verfügbar sein.