Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
@ui5/webcomponents
Advanced tools
Provides general purpose UI building blocks such as buttons, labels, inputs and popups.
Web Component | Tag name | Module import |
---|---|---|
Avatar | ui5-avatar | import "@ui5/webcomponents/dist/Avatar.js"; |
Avatar Group | ui5-avatar-group | import "@ui5/webcomponents/dist/AvatarGroup.js"; |
Badge | ui5-badge | import "@ui5/webcomponents/dist/Badge.js"; |
Bar | ui5-bar | import "@ui5/webcomponents/dist/Bar.js"; |
Breadcrumbs | ui5-breadcrumbs | import "@ui5/webcomponents/dist/Breadcrumbs.js"; |
Breadcrumbs Item | ui5-breadcrumbs-item | comes with ui5-breadcrumbs |
Badge | ui5-badge | import "@ui5/webcomponents/dist/Badge.js"; |
Busy Indicator | ui5-busy-indicator | import "@ui5/webcomponents/dist/BusyIndicator.js"; |
Button | ui5-button | import "@ui5/webcomponents/dist/Button.js"; |
Calendar | ui5-calendar | import "@ui5/webcomponents/dist/Calendar.js"; |
Calendar Date | ui5-calendar-date | comes with ui5-calendar |
Card | ui5-card | import "@ui5/webcomponents/dist/Card.js"; |
CardHeader | ui5-card-header | import "@ui5/webcomponents/dist/CardHeader.js"; |
Carousel | ui5-carousel | import "@ui5/webcomponents/dist/Carousel.js"; |
Checkbox | ui5-checkbox | import "@ui5/webcomponents/dist/CheckBox.js"; |
Color Palette | ui5-color-palette | import "@ui5/webcomponents/dist/ColorPalette.js"; |
Color Palette Item | ui5-color-palette-item | comes with ui5-color-palette |
Color Palette Popover | ui5-color-palette-popover | comes with ui5-color-palette-popover |
Color Picker | ui5-color-picker | import "@ui5/webcomponents/dist/ComboPicker.js"; |
ComboBox | ui5-combobox | import "@ui5/webcomponents/dist/ComboBox.js"; |
ComboBox Item | ui5-cb-item | comes with ui5-combobox |
ComboBox Group Item | ui5-cb-group-item | comes with ui5-combobox |
Date Picker | ui5-date-picker | import "@ui5/webcomponents/dist/DatePicker.js"; |
Date Range Picker | ui5-daterange-picker | import "@ui5/webcomponents/dist/DateRangePicker.js"; |
Date Time Picker | ui5-datetime-picker | import "@ui5/webcomponents/dist/DateTimePicker.js"; |
Dialog | ui5-dialog | import "@ui5/webcomponents/dist/Dialog.js"; |
File Uploader | ui5-file-uploader | import "@ui5/webcomponents/dist/FileUploader.js"; |
Icon | ui5-icon | import "@ui5/webcomponents/dist/Icon.js"; |
Input | ui5-input | import "@ui5/webcomponents/dist/Input.js"; |
Label | ui5-label | import "@ui5/webcomponents/dist/Label.js"; |
Link | ui5-link | import "@ui5/webcomponents/dist/Link.js"; |
List | ui5-list | import "@ui5/webcomponents/dist/List.js"; |
List - Standard Item | ui5-li | import "@ui5/webcomponents/dist/StandardListItem.js"; |
List - Custom Item | ui5-li-custom | import "@ui5/webcomponents/dist/CustomListItem.js"; |
List - Group Header Item | ui5-li-groupheader | import "@ui5/webcomponents/dist/GroupHeaderListItem.js"; |
Menu | ui5-menu | import "@ui5/webcomponents/dist/Menu.js"; |
Message Strip | ui5-message-strip | import "@ui5/webcomponents/dist/MessageStrip.js"; |
Multi ComboBox | ui5-multi-combobox | import "@ui5/webcomponents/dist/MultiComboBox.js"; |
Multi ComboBox Item | ui5-mcb-item | comes with ui5-multi-combobox |
Multi ComboBox Group Item | ui5-mcb-group-item | comes with ui5-multi-combobox |
Multi Input | ui5-multi-input | import "@ui5/webcomponents/dist/MultiInput.js"; |
Panel | ui5-panel | import "@ui5/webcomponents/dist/Panel.js"; |
Popover | ui5-popover | import "@ui5/webcomponents/dist/Popover.js"; |
ProgressIndicator | ui5-progress-indicator | import "@ui5/webcomponents/dist/ProgressIndicator.js"; |
Radio Button | ui5-radio-button | import "@ui5/webcomponents/dist/RadioButton.js"; |
Range Slider | ui5-range-slider | import "@ui5/webcomponents/dist/RangeSlider.js"; |
Rating Indicator | ui5-rating-indicator | import "@ui5/webcomponents/dist/RatingIndicator.js"; |
Responsive Popover | ui5-responsive-popover | import "@ui5/webcomponents/dist/ResponsivePopover.js"; |
Segmented Button | ui5-segmented-button | import "@ui5/webcomponents/dist/SegmentedButton.js"; |
Segmented Button Item | ui5-segmented-button-item | comes with ui5-segmented-button |
Select | ui5-select | import "@ui5/webcomponents/dist/Select.js"; |
Select Option | ui5-option | comes with ui5-select |
Slider | ui5-slider | import "@ui5/webcomponents/dist/Slider.js"; |
Split Button | ui5-split-button | import "@ui5/webcomponents/dist/SplitButton.js"; |
Step Input | ui5-step-input | import "@ui5/webcomponents/dist/StepInput.js"; |
Suggestion Item | ui5-suggestion-item | comes with InputSuggestions.js feature - see below |
Switch | ui5-switch | import "@ui5/webcomponents/dist/Switch.js"; |
Tab Container | ui5-tabcontainer | import "@ui5/webcomponents/dist/TabContainer.js"; |
Tab | ui5-tab | import "@ui5/webcomponents/dist/Tab.js"; |
Tab Separator | ui5-tab-separator | import "@ui5/webcomponents/dist/TabSeparator.js"; |
Table | ui5-table | import "@ui5/webcomponents/dist/Table.js"; |
Table Column | ui5-table-column | import "@ui5/webcomponents/dist/TableColumn.js"; |
Table Row | ui5-table-row | import "@ui5/webcomponents/dist/TableRow.js"; |
Table Group Row | ui5-table-group-row | import "@ui5/webcomponents/dist/TableGroupRow.js"; |
Table Cell | ui5-table-cell | import "@ui5/webcomponents/dist/TableCell.js"; |
Textarea | ui5-textarea | import "@ui5/webcomponents/dist/TextArea.js"; |
TimePicker | ui5-time-picker | import "@ui5/webcomponents/dist/TimePicker.js"; |
Title | ui5-title | import "@ui5/webcomponents/dist/Title.js"; |
Toast | ui5-toast | import "@ui5/webcomponents/dist/Toast.js"; |
Toggle Button | ui5-toggle-button | import "@ui5/webcomponents/dist/ToggleButton.js"; |
Token | ui5-token | comes with ui5-multi-input |
Tree | ui5-tree | import "@ui5/webcomponents/dist/Tree.js"; |
Tree Item | ui5-tree-item | comes with ui5-tree |
import "@ui5/webcomponents/dist/Assets.js";
Assets | Module | Notes |
---|---|---|
i18n , themes | @ui5/webcomponents/dist/Assets.js | Theming parameters and translations for the components Automatically imports also: @ui5/webcomponents-localization/dist/Assets.js and @ui5/webcomponents-theming/dist/Assets.js |
import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js
Affects | Feature Import | Description |
---|---|---|
ui5-color-palette | @ui5/webcomponents/dist/features/ColorPaletteMoreColors.js | Support for "more colors dialog" for the color palette component |
ui5-input | @ui5/webcomponents/dist/features/InputSuggestions.js | Support for input suggestions while typing |
Multiple (ui5-input , ui5-date-picker , etc...) | @ui5/webcomponents/dist/features/InputElementsFormSupport.js | Support for using input components in forms |
import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";
The ui5-color-palette
component has a showMoreColors
property, that, when set to true
, enables a "More colors" dialog.
Since this is not always needed, in order to use this dialog, you must import the above feature.
import "@ui5/webcomponents/dist/features/InputSuggestions.js";
The <ui5-input>
element acts as an <input>
with the Fiori design and added functionality, such as value state.
The so-called "input suggestions" is an advanced feature that allows the user to choose from a list of predefined options while typing.
Since input suggestions may not always be needed, they do not come as part of the <ui5-input>
itself.
To enable the functionality, import the above module into your app. This will also automatically import ui5-suggestion-item
for your convenience.
import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
HTML <form>
only submits a couple of standard HTML elements such as <input>
and <textarea>
to name a few.
Web Components that function as inputs, such as UI5's <ui5-input>
, <ui5-checkbox>
, <ui5-textarea>
are therefore
not submitted by the form out of the box.
Generally, this is not an issue, as very few modern applications submit forms in the classic way.
However, if you need to submit forms, you can import the module above, and it will enrich:
ui5-input
ui5-textarea
ui5-checkbox
ui5-radio-button
ui5-date-picker
ui5-select
with functionality, allowing them to be submitted in forms (provided you set their name
attribute) just as
any standard HTML input element would be.
There are two ways of submitting a form:
ui5-button
element will be able to submit the closest form
it's placed in, provided you set its submits
attribute.ui5-textarea
is the only exception. If Enter is pressed while ui5-textarea
is focused, it will result in a new line).We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the #webcomponents
channel of the OpenUI5 Community Slack.
Please check our Contribution Guidelines.
Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.
2.0.0-rc.0 (2024-04-09)
busy
property of the ui5-list
is renamed.
If you have previously used the busy
, busyDelay
properties:<ui5-list busy busy-delay="500"></ui5-list>
now you must use loading
and loadingDelay
properties:
<ui5-list loading loading-delay="500"></ui5-list>
disabled
property of the ui5-progress-indicator
is removed.
If you have previously used the disabled
property, it won't take effect:<ui5-progress-indicator disabled value="60"></ui5-progress-indicator>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
selectionMode
property no longer accepts "Delete" as value.
If you have previously used it:<ui5-upload-collection selection-mode="Delete"></ui5-upload-collection>
Now omit it completely and use hide-delete-button
onto the ui5-upload-collection:
<ui5-upload-collection>
<ui5-upload-collection-item hide-delete-button> </ui5-upload-collection-item>
</ui5-upload-collection>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
mode
property and the ListMode
enum have been renamed.
If you have previously used the mode
property and the ListMode
values:<ui5-list class="list" mode="SingleSelect">
<ui5-list class="list" mode="MultiSelect">
<ui5-upload-collection mode="SingleSelectBegin">
<ui5-upload-collection mode="SingleSelectEnd">
<ui5-tree mode="SingleSelectAuto" >
<ui5-tree mode="None" >
Now use selectionMode
and Single
, Multiple
instead:
<ui5-list class="list" selection-mode="Single">
<ui5-list class="list" selection-mode="Multiple">
<ui5-upload-collection selection-mode="SingleStart">
<ui5-upload-collection selection-mode="SingleEnd">
<ui5-tree selection-mode="SingleAuto">
<ui5-tree selection-mode="None">
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
someTab.getTabInsStripDomRef();
someTabSeparator.getTabInsStripDomRef();
Now use:
someTab.getDomRefInStrip();
someTabSeparator.getDomRefInStrip();
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
CSP.js
module and the creation of <style>
and <link>
tags, as all browsers now support adoptedStyleSheets. The following APIs are not available any more and should not be used:import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js"
ICardHeader
interface. If you previously used the interfaceimport type { ICardHeader } from "@ui5/webcomponents-base/dist/Card.js"
Use the CardHeader type instead:
import type CardHeader from "@ui5/webcomponents-base/dist/CardHeader.js"
IUploadCollectionItem
interface. If you previously used the interface:import type { IUploadCollectionItem} from "@ui5/webcomponents-fiori/dist/UploadCollection.js"
Use the UploadCollectionItem
type instead:
import type UploadCollectionItem from "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js"
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
size
property now accepts different values. If you previously used it like:<ui5-busy-indicator size="Small"></ui5-busy-indicator>
Now use the new values instead:
<ui5-busy-indicator size="S"></ui5-busy-indicator>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
status
property and its shadow part have been renamed. If you previously used them:<style>
.cardHeader::part(status) { ... }
</style>
<ui5-card-header status="3 of 10"></ui5-popover>
Now use additionalText
instead:
<style>
.cardHeader::part(additional-text) { ... }
</style>
<ui5-card-header class="cardHeader" additional-text="3 of 10"></ui5-card-header>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
pageIndicatorStyle
no longer exists. If you previously used it like:<ui5-carousel page-indicator-style="Numeric"></ui5-carousel>
Now you should use pageIndicatorType
instead:
<ui5-carousel page-indicator-type="Numeric"></ui5-carousel>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
UI5Element#render
method in favour of UI5Element#renderer
. If you previously used "render"class MyClass extends UI5Element {
static get render() {
return litRenderer;
}
}
start using "renderer"
class MyClass extends UI5Element {
static get renderer() {
return litRenderer;
}
}
npm init @ui5/webcomponents-package
used to create JS-based project, however now it will be TypeScript-based project.
If you previously used npm init @ui5/webcomponents-package --enable-typescript
to create TypeScript-based project, now it's by default, e.g npm init @ui5/webcomponents-package
and --enable-typescript
is removed.Left
and Right
options option have been renamed. If you previously used them to set the placement or the alignment of the popover:<ui5-popover horizontal-align="Left" placement-type="Left"></ui5-popover>
Now use Start
or End
instead:
<ui5-popover horizontal-align="Start" placement-type="Start"></ui5-popover>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
soccor
icon. Use soccer
instead.add-polygone
icon. Use add-polygon
instead.ui5-package/dist/api.json file
, you can now use ui5-package/dist/custom-elements.json
import "@ui5/webcomponents/dist/Assets-static.js";
import "@ui5/webcomponents-icons/dist/Assets-static.js"
use the dynamic equivalent of it:
import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-icons/dist/Assets.js"
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
selected-dates-change
is renamed to selection-change
. In addition the event details
values
and dates
are renamed to selectedValues
and selectedDateValues
. If you previously used the Calendar event as follows:myCalendar.addEventListener("selected-dates-change", () => {
const values = e.detail.values;
const dates = e.detail.dates;
})
Now you have to use the new event name and details:
myCalendar.addEventListener("selection-change", () => {
const values = event.detail.selectedValues;
const dates = event.detail.selectedDateValues;
})
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
color
is renamed to value
. If you previously used the change event of the ColorPicker as follows:<ui5-color-picker color="red"></ui5-color-picker>
Now you have to use it like this:
<ui5-color-picker value="red"></ui5-color-picker>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
openPopover
and showAt
methods are removed in favor of open
and opener
properties. If you previously used the imperative API:button.addEventListener("click", function(event) {
colorPalettePopover.showAt(this);
});
Now the declarative API should be used instead:
<ui5-button id="opener">Open</ui5-button>
<ui5-color-palette-popover opener="opener">
button.addEventListener("click", function(event) {
colorPalettePopover.open = !colorPalettePopover.open;
});
ui5-bar
component is now in main
library. If you previously imported the ui5-bar
from fiori
:import "@ui5/webcomponents-fiori/dist/Bar.js;
Now, import the ui5-bar
from main
:
import "@ui5/webcomponents/dist/Bar.js";
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-tab id="nestedTab" slot="subTabs"></ui5-tab>
Now use:
<ui5-tab id="nestedTab" slot="items"></ui5-tab>
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer>
Now use:
<ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer>
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
TabContainerBackgroundDesign
, use BackgroundDesign
instead.Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-tabcontainer show-overflow></ui5-tabcontainer>
now use the overflowButton slot:
<ui5-tabcontainer>
<ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button>
<ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button>
</ui5-tabcontainer>
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
placementType
property and the PopoverPlacementType
enum have been renamed.
If you have previously used the placementType
property and the PopoverPlacementType
<ui5-popover placement-type="Bottom"></ui5-popover>
import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js";
Now use placement
instead:
<ui5-placement="Bottom"></ui5-popover>
import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
size
property of the ui5--illustrated-message
is renamed to design
.
If you have previously used the size
property:<ui5-illustrated-message size="Dialog">
Now use design
instead:
<ui5-illustrated-message design="Dialog">
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
separator-style
property is renamed to separators
and the BreadcrumbsSeparatorStyle
enum is renamed to BreadcrumbsSeparator
.
If you have previously used the separator-style
property:<ui5-breadcrumbs separator-style="Slash">
Now use separators
instead:
<ui5-breadcrumbs separators="Slash">
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
disabled
property of the ui5-option
is removed.
If you have previously used the disabled
property:<ui5-option disabled>Option</ui5-option>
it will no longer work for the component.
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
ITab
interface. TabContainer is designed to work only with Tab and TabSeparator classes, so the interface was obsolete.FAQs
UI5 Web Components: webcomponents.main
The npm package @ui5/webcomponents receives a total of 40,918 weekly downloads. As such, @ui5/webcomponents popularity was classified as popular.
We found that @ui5/webcomponents demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.