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, combobox, details, drawer, 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, single-select, skip-nav, split-button, table, table-stateful, table-stateless, tabs, textarea, toolbar, tree, tree-item, tree-item-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 semantic aria-label of the component. Defines the label of the tree. Defines the label of the link. | string |
| 2 | _disabled | accordion, button, button-link, combobox, 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, single-select, split-button, textarea | Makes the element not focusable and ignore all events. | boolean |
| 3 | _level | accordion, alert, card, details, 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 |
| 4 | _open | accordion, details, drawer, tree-item, tree-item-wc | If set (to true) opens/expands the element, closes if not set (or set to false). Specifies the default open state of the drawer. | boolean |
| 5 | _alert | alert, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Defines whether the screen-readers should read out the notification. | boolean |
| 6 | _has-closer | alert, card | Defines whether the element can be closed. | boolean |
| 7 | _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" |
| 8 | _variant | alert, button, heading, input-checkbox, input-password, 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" "default" | "visibility-toggle" "bar" | "cycle" "block" | "inline" "cycle" | "dot" | "none" |
| 9 | _src | avatar, image | Sets the image `src` attribute to the given string. | string |
| 10 | _color | badge | Defines the backgroundColor and foregroundColor. | string | { backgroundColor: string; foregroundColor: Stringified |
| 11 | _icons | badge, button, button-link, combobox, icon, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-range, input-text, link, link-button, select, single-select, split-button | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). | KoliBriHorizontalIcons & KoliBriVerticalIcons | string string | { right?: IconOrIconClass; left?: IconOrIconClass; } string string | { checked: string; indeterminate?: string; unchecked?: string; } | { checked?: string; indeterminate: string; unchecked?: string; } | { checked?: string; indeterminate?: string; unchecked: string; } |
| 12 | _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 |
| 13 | _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 |
| 14 | _access-key | button, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, single-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 |
| 15 | _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 |
| 16 | _aria-description | button, button-link, link, link-button | Defines the value for the aria-description attribute. | 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, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, split-button, textarea | Defines the internal ID of the primary component element. | string |
| 21 | _name | button, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, split-button, textarea | Defines the technical name of an input field. | string |
| 22 | _short-key | button, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, single-select, textarea | Defines the elements short key. Adds a visual short key hint to the component. Defines the elements access key. | string |
| 23 | _tab-index | button, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, link, link-button, select, single-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 |
| 24 | _tooltip-align | button, button-link, combobox, 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, single-select, split-button, textarea | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" |
| 25 | _value | button, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, progress, select, single-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 |
| 26 | _hide-error | combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Hides the error message but leaves it in the DOM for the input's aria-describedby. | boolean |
| 27 | _hint | combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Defines the hint text. | string |
| 28 | _msg | combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Defines the properties for a message rendered as Alert component. | string | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6; _on?: KoliBriAlertEventCallbacks; _type?: "error" | "default" | "info" | "success" | "warning"; _variant?: "card" | "msg"; _label?: string; _alert?: boolean; _hasCloser?: boolean; } & { _description: string; } |
| 29 | _placeholder | combobox, input-email, input-number, input-password, input-text, single-select, textarea | Defines the placeholder for input field. To be shown when there's no value. | string |
| 30 | _required | combobox, input-checkbox, input-date, input-email, input-file, input-number, input-password, input-radio, input-text, select, single-select, textarea | Makes the input element required. | boolean |
| 31 | _suggestions | combobox, input-color, input-date, input-email, input-number, input-range, input-text | Suggestions the user can choose from. Suggestions to provide for the input. | W3CInputValue[] | string |
| 32 | _touched | combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textarea | Shows if the input was touched by a user. | boolean |
| 33 | _align | drawer, tabs | Specifies the orientation of the drawer. Defines the position of the tab captions. | "bottom" | "left" | "right" | "top" |
| 34 | _modal | drawer | Indicates whether the drawer is a modal. | boolean |
| 35 | _required-text | form | Defines whether the mandatory-fields-hint should be shown. A string overrides the default text. | boolean | string |
| 36 | _secondary-headline | heading | Defines the text of the secondary headline. | string |
| 37 | _loading | image | Defines the loading mode for the image. | "eager" | "lazy" |
| 38 | _sizes | image | Defines the image sizes for different screen resolutions, supporting _srcset. | string |
| 39 | _srcset | image | Setzt eine Liste von Quell-URLs mit Breiten der Bilder. | string |
| 40 | _checked | input-checkbox | Defines whether the checkbox is checked or not. Can be read and written. | boolean |
| 41 | _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 |
| 42 | _indeterminate | input-checkbox | Puts the checkbox in the indeterminate state, does not change the value of _checked. | boolean |
| 43 | _label-align | input-checkbox | Defines which alignment should be used for presentation. | "left" | "right" |
| 44 | _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" |
| 45 | _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 |
| 46 | _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 |
| 47 | _read-only | input-date, input-email, input-number, input-password, input-text, textarea | Makes the input element read only. | boolean |
| 48 | _step | input-date, input-number, input-range | Defines the step size for value changes. | number |
| 49 | _has-counter | input-email, input-password, input-text, textarea | Shows the character count on the lower border of the input. | boolean |
| 50 | _max-length | input-email, input-password, input-text, textarea | Defines the maximum number of input characters. | number |
| 51 | _multiple | input-email, input-file, select | Makes the input accept multiple inputs. | boolean |
| 52 | _pattern | input-email, input-password, input-text | Defines a validation pattern for the input field. | string |
| 53 | _accept | input-file | Defines which file formats are accepted. | string |
| 54 | _options | input-radio, select, single-select | Options the user can choose from. Options the user can choose from, also supporting Optgroup. | RadioOption (Option Option |
| 55 | _orientation | input-radio, nav | Defines whether the orientation of the component is horizontal or vertical. | "horizontal" | "vertical" |
| 56 | _spell-check | input-text, textarea | Defines whether the browser should check the spelling and grammar. | boolean |
| 57 | _aria-current-value | link, link-button | Defines the value for the aria-current attribute. | "date" | "false" | "location" | "page" | "step" | "time" | "true" |
| 58 | _download | link, link-button | Tells the browser that the link contains a file. Optionally sets the filename. | string |
| 59 | _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 |
| 60 | _target | link, link-button | Defines where to open the link. | string |
| 61 | _width | modal | Defines the width of the modal. (max-width: 100%) | string |
| 62 | _collapsible | nav | Defines if navigation nodes can be collapsed or not. Enabled by default. | boolean |
| 63 | _has-icons-when-expanded | nav | Shows icons next to the navigation item labels, even when the navigation is not collapsed. | boolean |
| 64 | _boundary-count | pagination | Defines the amount of pages to show next to the outer arrow buttons. | number |
| 65 | _has-buttons | pagination | Defines which navigation buttons to render (first, last, next, previous buttons). | boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; } |
| 66 | _page | pagination | Defines the current page. | number |
| 67 | _page-size | pagination | Defines the amount of entries to show per page. | number |
| 68 | _page-size-options | pagination | Defines the options for the page-size-select. | number[] | string |
| 69 | _sibling-count | pagination | Defines the amount of pages to show next to the current page. | number |
| 70 | _unit | progress | Defines the unit of the step values (not shown). | string |
| 71 | _quote | quote | Defines the text of the quote. | string |
| 72 | _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 |
| 73 | _show | spin | Makes the element show up. | boolean |
| 74 | _allow-multi-sort | table, table-stateful | Defines whether to allow multi sort. | boolean |
| 75 | _data | table, table-stateful, table-stateless | Defines the primary table data. | KoliBriTableDataType[] | string |
| 76 | _data-foot | table, table-stateful, table-stateless | Defines the data for the table footer. | KoliBriTableDataType[] | string |
| 77 | _headers | table, table-stateful | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCellWithLogic[][]; vertical?: KoliBriTableHeaderCellWithLogic[][]; } |
| 78 | _min-width | table, table-stateful, table-stateless | Defines the table min-width. | string |
| 79 | _pagination | table, table-stateful | 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 |
| 80 | _pagination-position | table, table-stateful | Controls the position of the pagination. | "both" | "bottom" | "top" |
| 81 | _selection | table, table-stateful, table-stateless | Defines how rows can be selected and the current selection. | string | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string; multiple?: boolean; selectedKeys?: string[]; }) |
| 82 | _header-cells | table-stateless | Defines the horizontal and vertical table headers. | string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; } |
| 83 | _behavior | tabs | Defines which behavior is active. | "select-automatic" | "select-manual" |
| 84 | _selected | tabs | Defines which tab is active. | number |
| 85 | _tabs | tabs | Defines the tab captions. | TabButtonProps[] | string |
| 86 | _adjust-height | textarea | Adjusts the height of the element to its content. | boolean |
| 87 | _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) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | "none" | "vertical" |
| 88 | _active | tree-item, tree-item-wc | If set (to true) the tree item is the active one. | boolean |
| 89 | _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.