Zum Hauptinhalt springen

Wir haben KoliBri - Public UI v3 veröffentlicht. Für die LTS Version, siehe .

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, 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, popover-button, popover-button-wc, progress, quote, select, single-select, skip-nav, split-button, table-stateful, table-stateless, tabs, textarea, toolbar, tree, tree-item, tree-item-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.
string
2_disabledaccordion, 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, popover-button, popover-button-wc, select, single-select, split-button, textareaMakes the element not focusable and ignore all events.boolean
3_levelaccordion, alert, card, details, 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, details, drawer, tree-item, tree-item-wcOpens/expands the element when truthy, closes/collapses when falsy.boolean
5_alertalertDefines 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, popover-button, popover-button-wc, 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, button-link, input-checkbox, input-password, link, link-button, modal, popover-button, popover-button-wc, progress, quote, spin, split-buttonDefines which variant should be used for presentation.
Defines the variant of the modal.
"card" | "msg"
"custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary"
"inline" | "standalone"
"button" | "default" | "switch"
"default" | "visibility-toggle"
"blank" | "card"
"bar" | "cycle"
"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, combobox, icon, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-range, input-text, link, link-button, popover-button, popover-button-wc, select, single-select, split-button, textareaDefines 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-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?: StencilUnknown; _ariaExpanded?: boolean; _accessKey?: string; _role?: "button" | "link" | "tab" | "treeitem"; _ariaControls?: string; _ariaDescription?: string; _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; _shortKey?: string; _syncValueBySelector?: string; _tooltipAlign?: AlignPropType; }
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, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-range, input-text, link, link-button, popover-button, popover-button-wc, select, single-select, textareaDefines which key combination can be used to trigger or focus the interactive element of the component.string
15_aria-controlsbutton, button-link, popover-button, popover-button-wc, 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-descriptionbutton, button-link, link, link-button, popover-button, popover-button-wcDefines the value for the aria-description attribute.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, popover-button, popover-button-wc, 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, popover-button, popover-button-wc, split-buttonDefines the custom class attribute if _variant="custom" is set.string
20_idbutton, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, popover-button, popover-button-wc, select, single-select, split-button, textareaDefines the internal ID of the primary component element.string
21_namebutton, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, popover-button, popover-button-wc, select, single-select, split-button, textareaDefines the technical name of an input field.string
22_short-keybutton, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-range, input-text, link, link-button, popover-button, popover-button-wc, select, single-select, textareaAdds a visual short key hint to the component.string
23_tooltip-alignbutton, 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, popover-button, popover-button-wc, select, single-select, split-button, textareaDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top"
24_valuebutton, button-link, combobox, input-checkbox, input-color, input-date, input-email, input-number, input-password, input-radio, input-range, input-text, popover-button, popover-button-wc, progress, select, single-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}` | null | number
`${number}.${number}` | `${number}` | number
number
StencilUnknown[] | string
25_hide-msgcombobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textareaHides the error message but leaves it in the DOM for the input's aria-describedby.boolean
26_hintcombobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textareaDefines the hint text.string
27_msgcombobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textareaDefines the properties for a message rendered as Alert component.string | {} & { _level?: 0 | 2 | 1 | 4 | 3 | 5 | 6; _on?: KoliBriAlertEventCallbacks; _type?: "default" | "info" | "success" | "warning" | "error"; _variant?: "card" | "msg"; _label?: string; _alert?: boolean; _hasCloser?: boolean; } & { _description: string; }
28_placeholdercombobox, input-email, input-number, input-password, input-text, single-select, textareaDefines the placeholder for input field. To be shown when there's no value.string
29_requiredcombobox, input-checkbox, input-date, input-email, input-file, input-number, input-password, input-radio, input-text, select, single-select, textareaMakes the input element required.boolean
30_suggestionscombobox, input-color, input-date, input-email, input-number, input-range, input-textSuggestions to provide for the input.W3CInputValue[] | string
31_touchedcombobox, input-checkbox, input-color, input-date, input-email, input-file, input-number, input-password, input-radio, input-range, input-text, select, single-select, textareaShows if the input was touched by a user.boolean
32_aligndrawer, tabsDefines the visual orientation of the component."bottom" | "left" | "right" | "top"
33_required-textformDefines whether the mandatory-fields-hint should be shown. A string overrides the default text.boolean | string
34_secondary-headlineheadingDefines the text of the secondary headline.string
35_loadingimageDefines the loading mode for the image."eager" | "lazy"
36_sizesimageDefines the image sizes for different screen resolutions, supporting _srcset.string
37_srcsetimageSetzt eine Liste von Quell-URLs mit Breiten der Bilder.string
38_checkedinput-checkboxDefines whether the checkbox is checked or not. Can be read and written.boolean
39_indeterminateinput-checkboxPuts the checkbox in the indeterminate state, does not change the value of _checked.boolean
40_label-aligninput-checkboxDefines which alignment should be used for presentation."left" | "right"
41_auto-completeinput-color, input-date, input-email, input-number, input-password, input-range, input-textDefines whether the input can be auto-completed."off" | "on"
42_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}` | number
number
43_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}` | number
44_read-onlyinput-date, input-email, input-number, input-password, input-text, textareaMakes the input element read only.boolean
45_stepinput-date, input-number, input-rangeDefines the step size for value changes.`${number}.${number}` | `${number}` | number
46_has-counterinput-email, input-password, input-text, textareaShows the character count on the lower border of the input.boolean
47_max-lengthinput-email, input-password, input-text, textareaDefines the maximum number of input characters.number
48_multipleinput-email, input-file, selectMakes the input accept multiple inputs.boolean
49_patterninput-email, input-password, input-textDefines a validation pattern for the input field.string
50_acceptinput-fileDefines which file formats are accepted.string
51_optionsinput-radio, select, single-selectOptions the user can choose from.
Options the user can choose from, also supporting Optgroup.
RadioOption[] | string
(Option | Optgroup)[] | string
Option[] | string
52_orientationinput-radio, nav, toolbarDefines whether the orientation of the component is horizontal or vertical."horizontal" | "vertical"
53_spell-checkinput-text, textareaDefines whether the browser should check the spelling and grammar.boolean
54_aria-current-valuelink, link-buttonDefines the value for the aria-current attribute."date" | "false" | "location" | "page" | "step" | "time" | "true"
55_downloadlink, link-buttonTells the browser that the link contains a file. Optionally sets the filename.string
56_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.
string
57_targetlink, link-buttonDefines where to open the link.string
58_widthmodalDefines the width of the modal. (max-width: 100%)string
59_collapsiblenavDefines if navigation nodes can be collapsed or not. Enabled by default.boolean
60_has-icons-when-expandednavShows icons next to the navigation item labels, even when the navigation is not collapsed.boolean
61_boundary-countpaginationDefines the amount of pages to show next to the outer arrow buttons.number
62_has-buttonspaginationDefines which navigation buttons to render (first, last, next, previous buttons).boolean | string | { first: boolean; last: boolean; next: boolean; previous: boolean; }
63_pagepaginationDefines the current page.number
64_page-sizepaginationDefines the amount of entries to show per page.number
65_page-size-optionspaginationDefines the options for the page-size-select.number[] | string
66_sibling-countpaginationDefines the amount of pages to show next to the current page.number
67_popover-alignpopover-button, popover-button-wcDefines where to show the Popover preferably: top, right, bottom or left."bottom" | "left" | "right" | "top"
68_tab-indexpopover-button, popover-button-wc, selectDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number
69_unitprogressDefines the unit of the step values (not shown).string
70_quotequoteDefines the text of the quote.string
71_rowsselect, single-select, textareaDefines how many rows of options should be visible at the same time.
Maximum number of visible rows in the options dropdown before scrolling.
Defines how many rows of text should be visible at the same time.
number
72_hide-clear-buttonsingle-selectDefines the whether the clear button should be hidden.boolean
73_showspinMakes the element show up.boolean
74_allow-multi-sorttable-statefulDefines whether to allow multi sort.boolean
75_datatable-stateful, table-statelessDefines the primary table data.KoliBriTableDataType[] | string
76_data-foottable-stateful, table-statelessDefines the data for the table footer.KoliBriTableDataType[] | string
77_headerstable-statefulDefines the horizontal and vertical table headers.string | { horizontal?: KoliBriTableHeaderCellWithLogic[][]; vertical?: KoliBriTableHeaderCellWithLogic[][]; }
78_min-widthtable-stateful, table-statelessDefines the table min-width (CSS width values).string
79_paginationtable-statefulDefines 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; }
80_pagination-positiontable-statefulControls the position of the pagination."both" | "bottom" | "top"
81_selectiontable-stateful, table-statelessDefines how rows can be selected and the current selection.string | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string; multiple?: boolean; selectedKeys?: string[]; disabledKeys?: string[]; })
82_header-cellstable-statelessDefines the horizontal and vertical table headers.string | { horizontal?: KoliBriTableHeaderCell[][]; vertical?: KoliBriTableHeaderCell[][]; }
83_behaviortabsDefines which behavior is active."select-automatic" | "select-manual"
84_has-create-buttontabsDefines whether the element has a create button.boolean
85_selectedtabsDefines which tab is active.number
86_tabstabsDefines the tab captions.TabButtonProps[] | string
87_adjust-heighttextareaAdjusts the height of the element to its content.boolean
88_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) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`."none" | "vertical"
89_activetree-item, tree-item-wcIf set (to true) the tree item is the active one.boolean
90_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.