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, textarea, tree, tree-item, tree-item-wc, tree-wcDefines 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-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_disabledaccordion, 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, textareaMakes the element not focusable and ignore all events.boolean
4_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
5_openaccordion, details, tree-item, tree-item-wcIf set (to true) opens/expands the element, closes if not set (or set to false).boolean
6_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
7_has-closeralert, cardDefines whether the element can be closed.boolean
8_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"
9_variantalert, button, heading, 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"
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "strong"
"button" | "default" | "switch"
"bar" | "cycle" | "cycle-label-value" | "cycle-value-label"
"block" | "inline"
"cycle" | "dot" | "none"
10_srcavatar, imageSets the image `src` attribute to the given string.string
11_colorbadgeDefines the backgroundColor and foregroundColor.string | { backgroundColor: string; foregroundColor: Stringified; }
12_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; }
13_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; }
14_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
15_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
16_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
17_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
18_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
19_custom-classbutton, link-button, pagination, split-buttonDefines the custom class attribute if _variant="custom" is set.string
20_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
21_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
22_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
23_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
24_required-textformDefines whether the mandatory-fields-hint should be shown. A string overrides the default text.boolean | string
25_secondary-headlineheadingDefines the text of the secondary headline.string
26_loadingimageDefines the loading mode for the image."eager" | "lazy"
27_sizesimageDefines the image sizes for different screen resolutions, supporting _srcset.string
28_srcsetimageSetzt eine Liste von Quell-URLs mit Breiten der Bilder.string
29_checkedinput-checkboxDefines whether the checkbox is checked or not. Can be read and written.boolean
30_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
31_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
32_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
33_indeterminateinput-checkboxPuts the checkbox in the indeterminate state, does not change the value of _checked.boolean
34_requiredinput-checkbox, input-date, input-email, input-file, input-number, input-password, input-radio, input-text, select, textareaMakes the input element required.boolean
35_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
36_auto-completeinput-color, input-date, input-email, input-number, input-password, input-range, input-textDefines whether the input can be auto-completed."off" | "on"
37_suggestionsinput-color, input-date, input-email, input-number, input-range, input-textSuggestions to provide for the input.W3CInputValue[] | string
38_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
39_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
40_read-onlyinput-date, input-email, input-number, input-password, input-text, textareaMakes the input element read only.boolean
41_stepinput-date, input-number, input-rangeDefines the step size for value changes.number
42_has-counterinput-email, input-password, input-text, textareaShows the character count on the lower border of the input.boolean
43_max-lengthinput-email, input-password, input-text, textareaDefines the maximum number of input characters.number
44_multipleinput-email, input-file, selectMakes the input accept multiple inputs.boolean
45_patterninput-email, input-password, input-textDefines a validation pattern for the input field.string
46_placeholderinput-email, input-number, input-password, input-text, textareaDefines the placeholder for input field. To be shown when there's no value.string
47_acceptinput-fileDefines which file formats are accepted.string
48_optionsinput-radio, selectOptions the user can choose from.
Options the user can choose from, also supporting Optgroup.
Option[] | string
(Option | Optgroup)[] | string
49_orientationinput-radio, navDefines whether the orientation of the component is horizontal or vertical."horizontal" | "vertical"
50_aria-current-valuelink, link-buttonDefines the value for the aria-current attribute."date" | "false" | "location" | "page" | "step" | "time" | "true"
51_downloadlink, link-buttonTells the browser that the link contains a file. Optionally sets the filename.string
52_hreflink, link-button, quote, tree-item, tree-item-wcSets 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_targetlink, link-buttonDefines where to open the link.string
54_widthmodalDefines the width of the modal. (max-width: 100%)string
55_collapsiblenavDefines if navigation nodes can be collapsed or not. Enabled by default.boolean
56_has-icons-when-expandednavShows icons next to the navigation item labels, even when the navigation is not collapsed.boolean
57_boundary-countpaginationDefines the amount of pages to show next to the outer arrow buttons.number
58_has-buttonspaginationDefines which navigation buttons to render (first, last, next, previous buttons).boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; }
59_pagepaginationDefines the current page.number
60_page-sizepaginationDefines the amount of entries to show per page.number
61_page-size-optionspaginationDefines the options for the page-size-select.number[] | string
62_sibling-countpaginationDefines the amount of pages to show next to the current page.number
63_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"
64_showpopover-wc, spinMakes the element show up.boolean
65_unitprogressDefines the unit of the step values (not shown).string
66_quotequoteDefines the text of the quote.string
67_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
68_allow-multi-sorttableDefines whether to allow multi sort.boolean
69_datatableDefines the primary table data.KoliBriTableDataType[] | string
70_data-foottableDefines the data for the table footer.KoliBriTableDataType[] | string
71_headerstableDefines the horizontal and vertical table headers.string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; }
72_min-widthtableDefines the table min-width.string
73_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; }
74_pagination-positiontableControls the position of the pagination."both" | "bottom" | "top"
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_activetree-item, tree-item-wcIf set (to true) the tree item is the active one.boolean
80_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, _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 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.