Zum Hauptinhalt springen

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

#PropertyComponentsDescriptionsTypes
1_labelabbr, 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, textareaDefines 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.
string
2_tooltip-alignabbr, 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, textareaDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top"
3_levelaccordion, alert, card, headingDefines 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_openaccordion, detailsIf set (to true) opens/expands the element, closes if not set (or set to false).boolean
5_alertalert, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaDefines whether the screen-readers should read out the notification.boolean
6_has-closeralert, cardDefines whether the element can be closed.boolean
7_typealert, button, button-link, input-date, input-text, split-buttonDefines 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_variantalert, button, input-checkbox, link-button, progress, quote, spin, split-buttonDefines which variant should be used for presentation."card" | "msg"
"custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary"
"button" | "default" | "switch"
"bar" | "cycle" | "cycle-label-value" | "cycle-value-label"
"block" | "inline"
"cycle" | "dot" | "none"
9_srcavatar, imageSets the image `src` attribute to the given string.string
10_colorbadgeDefines the backgroundColor and foregroundColor.string | { backgroundColor: string; foregroundColor: Stringified; }
11_iconsbadge, 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-buttonDefines 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; }
12_smart-buttonbadge, input-color, input-date, input-email, input-file, input-number, input-password, input-textAllows to add a button with an arbitrary action within the element (_hide-label only).string | { _label: string; } & { _tabIndex?: number; _value?: Stringified; _role?: AlternativeButtonLinkRolePropType; _ariaControls?: string; _ariaExpanded?: boolean; _ariaSelected?: boolean; _on?: ButtonCallbacksPropType; _type?: "button" | "reset" | "submit"; _variant?: "primary" | "secondary" | "normal" | "tertiary" | "danger" | "ghost" | "custom"; _customClass?: string; _disabled?: boolean; _hideLabel?: boolean; _icons?: IconsPropType; _id?: string; _name?: string; _syncValueBySelector?: string; _tooltipAlign?: AlignPropType; _accessKey?: string; }
13_linksbreadcrumb, nav, skip-navDefines 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-keybutton, 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, textareaDefines the elements access key.
Defines which key combination can be used to trigger or focus the interactive element of the component.
string
15_aria-controlsbutton, button-link, split-buttonDefines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)string
16_aria-expandedbutton, button-link, split-buttonDefines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)boolean
17_aria-selectedbutton, button-link, split-buttonDefines 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
18_custom-classbutton, link-button, pagination, split-buttonDefines the custom class attribute if _variant="custom" is set.string
19_disabledbutton, 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, textareaMakes the element not focusable and ignore all events.boolean
20_hide-labelbutton, 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, nav, select, split-button, textareaHides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.boolean
21_idbutton, 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, textareaDefines the internal ID of the primary component element.string
22_namebutton, 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, textareaDefines the technical name of an input field.string
23_tab-indexbutton, 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, textareaDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number
24_valuebutton, 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, textareaDefines 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 | string
number
W3CInputValue[] | string
25_required-textformDefines whether the mandatory-fields-hint should be shown. A string overrides the default text.boolean | string
26_secondary-headlineheadingDefines the text of the secondary headline.string
27_loadingimageDefines the loading mode for the image."eager" | "lazy"
28_sizesimageDefines the image sizes for different screen resolutions, supporting _srcset.string
29_srcsetimageSetzt eine Liste von Quell-URLs mit Breiten der Bilder.string
30_checkedinput-checkboxDefines whether the checkbox is checked or not. Can be read and written.boolean
31_errorinput-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaDefines the error message text.string
32_hide-errorinput-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaHides the error message but leaves it in the DOM for the input's aria-describedby.boolean
33_hintinput-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaDefines the hint text.string
34_indeterminateinput-checkboxPuts the checkbox in the indeterminate state, does not change the value of _checked.boolean
35_requiredinput-checkbox, input-date, input-email, input-file, input-number, input-password, input-radio, input-text, select, textareaMakes the input element required.boolean
36_touchedinput-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, textareaShows if the input was touched by a user.boolean
37_auto-completeinput-color, input-date, input-email, input-number, input-password, input-range, input-textDefines whether the input can be auto-completed."off" | "on"
38_suggestionsinput-color, input-date, input-email, input-number, input-range, input-textSuggestions to provide for the input.W3CInputValue[] | string
39_maxinput-date, input-number, input-range, pagination, progressDefines 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
40_mininput-date, input-number, input-rangeDefines 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
41_read-onlyinput-date, input-email, input-number, input-password, input-text, textareaMakes the input element read only.boolean
42_stepinput-date, input-number, input-rangeDefines the step size for value changes.number
43_has-counterinput-email, input-password, input-text, textareaShows the character count on the lower border of the input.boolean
44_max-lengthinput-email, input-password, input-text, textareaDefines the maximum number of input characters.number
45_multipleinput-email, input-file, selectMakes the input accept multiple inputs.boolean
46_patterninput-email, input-password, input-textDefines a validation pattern for the input field.string
47_placeholderinput-email, input-number, input-password, input-text, textareaDefines the placeholder for input field. To be shown when there's no value.string
48_acceptinput-fileDefines which file formats are accepted.string
49_optionsinput-radio, selectOptions the user can choose from.
Options the user can choose from, also supporting Optgroup.
Option[] | string
(Option | Optgroup)[] | string
50_orientationinput-radio, navDefines whether the orientation of the component is horizontal or vertical."horizontal" | "vertical"
51_downloadlink, link-buttonTells the browser that the link contains a file. Optionally sets the filename.string
52_hreflink, link-button, quoteSets the target URI of the link or citation source.
Defines the target URI of the link.
string
53_listen-aria-currentlink, link-buttonListen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value."date" | "location" | "page" | "step" | "time" | boolean
54_targetlink, link-buttonDefines where to open the link.string
55_target-descriptionlink, link-buttonDefines the description to use when the link is going to be opened in another application.string
56_widthmodalDefines the width of the modal. (max-width: 100%)string
57_aria-current-valuenavDefines the value of aria-current to be used with the current context within the navigation."date" | "location" | "page" | "step" | "time" | boolean
58_collapsiblenavDefines if navigation nodes can be collapsed or not. Enabled by default.boolean
59_boundary-countpaginationDefines the amount of pages to show next to the outer arrow buttons.number
60_has-buttonspaginationDefines which navigation buttons to render (first, last, next, previous buttons).boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; }
61_pagepaginationDefines the current page.number
62_page-sizepaginationDefines the amount of entries to show per page.number
63_page-size-optionspaginationDefines the options for the page-size-select.number[] | string
64_sibling-countpaginationDefines the amount of pages to show next to the current page.number
65_alignpopover-wc, tabsDefines the alignment of the tooltip, popover or tabs in relation to the element.
Defines the position of the tab captions.
"bottom" | "left" | "right" | "top"
66_showpopover-wc, spinMakes the element show up.boolean
67_unitprogressDefines the unit of the step values (not shown).string
68_quotequoteDefines the text of the quote.string
69_rowsselect, textareaDefines 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
70_datatableDefines the primary table data.KoliBriTableDataType[] | string
71_data-foottableDefines the data for the table footer.KoliBriTableDataType[] | string
72_headerstableDefines the horizontal and vertical table headers.string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; }
73_min-widthtableDefines the table min-width.string
74_paginationtableDefines whether to show the data distributed over multiple pages.boolean | string | { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks; _page?: number; _max?: number; _boundaryCount?: number; _hasButtons?: boolean | Stringified; _pageSize?: number; _pageSizeOptions?: Stringified; _siblingCount?: number; _customClass?: string; _label?: string; _tooltipAlign?: AlignPropType; }
75_selectedtabsDefines which tab is active.number
76_tabstabsDefines the tab captions.TabButtonProps[] | string
77_adjust-heighttextareaAdjusts the height of the element to its content.boolean
78_resizetextareaDefines 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_hide-buttonkol-paginationVersteckt 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 PropertyDeprecated Properties
_align_tabs-align
_dataFoot
_hide-button_has-buttons (?)
_hide-label_compact, _icon-only
_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 ComponentDeprecated 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

  • ButtonGroup wird durch die Umsetzung der Toolbar-Komponente abgelöst
  • LinkGroup wird durch die Umsetzung der List-Komponente abgelöst
  • Logo zieht 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.