@ui5/webcomponents
Advanced tools
Changelog
2.0.0-rc.3 (2024-05-10)
accessibilityAttributes (#8810) (49d587c)ui5-badge to Tag ui5-tag (#8884) (4b8c1ee)mode to selectionMode (#8761) (4be1540)activeIcon property (#8803) (f2bcfc1), closes #8461@ui5/webcomponents-compat (#8849) (779bcdc)show method with open property (#8855) (372d27d), closes #8461openPicker method with open property (#8749) (d283984)None to Normal.
Previously long texts would truncate if there is not enough space. Now, long texts would wrap.Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
ui5-input: Remove suggestion-item-select event. Rename and modify suggestion-item-preview event. Remove openPicker method and replace it with public property "open".
refactor(ui5-input): events changes
refactor(ui5-input): property open tests
refactor(ui5-input): events change
refactor(ui5-input): events change
refactor(ui5-input): events changes
refactor(ui5-input): events changes
refactor(ui5-input): events changes
ui5-date-picker: removed openPicker(), closePicker() and isOpen() methods. If you previously used openPicker() and closePicker():
const datePicker = document.getElementById("exampleID");
datePicker.openPicker();
datePicker.closePicker();
Now use the open property respectively:
const datePicker = document.getElementById("exampleID");
datePicker.open = true;
datePicker.open = false;
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
accessibilityTexts and accessibilityRoles properties are removed. If you have previously used the accessibilityTexts or accessibilityRoles properties:fcl.accessibilityTexts = {
startColumnAccessibleName: "Products list",
midColumnAccessibleName: "Product information",
endColumnAccessibleName: "Product detailed information",
startArrowLeftText: "Collapse products list",
startArrowRightText: "Expand products list",
endArrowLeftText: "Expand product detailed information",
endArrowRightText: "Collapse product detailed information",
startArrowContainerAccessibleName: "Start Arrow Container",
endArrowContainerAccessibleName: "End Arrow Container",
}
fcl.accessibilityRoles = {
startColumnRole: "complementary",
startArrowContainerRole: "navigation",
midColumnRole: "main",
endArrowContainerRole: "navigation",
endColumnRole: "complementary".
}
Now use accessibilityAttributes instead:
fcl.accessibilityAttributes = {
startColumn: {
role: "complementary",
name: "Products list",
},
midColumn: {
role: "main",
name: "Product information",
},
endColumn: {
role: "complementary",
name: "Product detailed information",
},
startArrowLeft: {
name: "Collapse products list",
},
startArrowRight: {
name: "Expand products list",
},
endArrowLeft: {
name: "Expand product detailed information",
},
endArrowRight: {
name: "Collapse product detailed information",
},
startArrowContainer: {
role: "navigation",
name: "Start Arrow Container",
},
endArrowContainer: {
role: "navigation",
name: "End Arrow Container",
},
};
ShellBar's accessibilityTexts and accessibilityRoles properties are removed. If you have previously used the accessibilityTexts or accessibilityRoles properties:
shellbar.accessibilityTexts = {
profileButtonTitle: "John Dow",
logoTitle: "Custom logo title",
}
shellbar.accessibilityRoles = {
logoRole: "link"
};
Now use accessibilityAttributes instead:
shellbar.accessibilityAttributes = {
profile: {
name: "John Dow",
},
logo: {
role: "link"
name: "Custom logo title"
},
};
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
ui5-badge:<ui5-badge></ui5-badge>
Now use ui5-tag instead:
<ui5-tag></ui5-tag>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
ariaHidden , interactive and accessibleRole , previously available in the ui5-icon component, have been removed. They are replaced by a new property named mode that specifies the component's mode.
Alongside this update, a new enumeration IconMode, has been introduced to outline the available options for this property:Image: This is the default setting. It configures the component to internally render role="img".
Interactive: Configures the component to internally render role="button". This mode also supports focus and press handling to enhance interactivity.
Decorative: In this mode, the component internally renders role="presentation" and aria-hidden="true", making it purely decorative without semantic content or interactivity.
Now, you can set the mode of the ui5-icon as it follows:
<ui5-icon id="imageIcon" mode="Image" name="add-equipment"></ui5-icon>
<ui5-icon id="myInteractiveIcon" mode="Interactive" name="add-equipment"></ui5-icon>
<ui5-icon id="decorativeIcon" mode="Decorative" name="add-equipment"></ui5-icon>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
accessibleRole property for both ui5-li and ui5-list has been updated from a string type to an enum type.
Additionally, the new enums ListItemAccessibleRole and ListAccessibleRole have been introduced for these properties respectively.
The available options for the ui5-li:
ListItem- Represents the ARIA role "listitem". (by default)
MenuItem - Represents the ARIA role "menuitem".
TreeItem - Represents the ARIA role "treeitem".
Option - Represents the ARIA role "option".
None - Represents the ARIA role "none".The available options for the ui5-list:
List- Represents the ARIA role "list". (by default)
Menu - Represents the ARIA role "menu".
Tree - Represents the ARIA role "tree".
ListBox - Represents the ARIA role "listbox".
If you have previously used:
<ui5-li accessible-role="menuitem"> List Item</ui5-li>
<ui5-list accessible-role="tree"> List </ui5-list>
Now use:
<ui5-li accessible-role="MenuItem"> List Item</ui5-li>
<ui5-list accessible-role="Tree"> List </ui5-list>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
@ui5/webcomponents, you need to import it from @ui5/webcomponents-compat:import "@ui5/webcomponents-compat/dist/Table.js"; // ui5-table
import "@ui5/webcomponents-compat/dist/TableColumn.js"; // ui5-table-column
import "@ui5/webcomponents-compat/dist/TableRow.js"; // ui5-table-row`
import "@ui5/webcomponents-compat/dist/TableGroupRow.js";` // ui5-table-group-row
import "@ui5/webcomponents-compat/dist/TableCell.js"; // ui5-table-cell
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
<ui5-input value-state="Success"></ui5-input>
<ui5-input value-state="Warning"></ui5-input>
<ui5-input value-state="Error"></ui5-input>
<ui5-input value-state="Positive"></ui5-input>
<ui5-input value-state="Critical"></ui5-input>
<ui5-input value-state="Negative"></ui5-input>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
open property. If you previously used toast.show() to show the toast, you must now se toast.open=true.ui5-segmentedbutton-item pressed property is called selected now.Previously the application developers could use the ui5-segmentedbutton-item as follows:
<ui5-segmented-button>
<ui5-segmented-button-item pressed> Option 1</ui5-segmented-button-item>
<ui5-segmented-button-item>Option 2</ui5-segmented-button-item>
<ui5-segmented-button-item>Option 3</ui5-segmented-button-item>
</ui5-segmented-button>
Now the application developers should use the ui5-segmentedbutton-item as follows:
<ui5-segmented-button>
<ui5-segmented-button-item selected> Option 1</ui5-segmented-button-item>
<ui5-segmented-button-item>Option 2</ui5-segmented-button-item>
<ui5-segmented-button-item>Option 3</ui5-segmented-button-item>
</ui5-segmented-button>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
changeWithClick was renamed to withScroll in the WizardStepChangeEventDetail.JIRA: BGSOFUIRILA-3867
titleLevel property of the ui5-illustrated-messageis removed.
If you have previously used the titleLevel property:<ui5-illustrated-message title-level="H6>
it will no longer work for the component.
Instead, you could set the title of the ui5-illustrated-message on the title slot, as it follows
<ui5-illustrated-message>
<ui5-title slot="title" level="H3">This is a slotted title</ui5-title>
</ui5-illustrated-message>
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
SelectionMode and the values it take from SingleSelect and MultiSelect to Single and Multiple. Also deleted deprecated getter - selectedItem and deprecated event detail selectedItem and now can be used with the selectedItems getter and selectedItems event detail.Previously the application developers could set the selection mode as follows:
<ui5-segmented-button id="segButtonMulti" mode="MultiSelect">
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Click</ui5-segmented-button-item>
<ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
</ui5-segmented-button>
Now the application developers could set the selection mode as follows:
<ui5-segmented-button id="segButtonMulti" selection-mode="Multiple">
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Click</ui5-segmented-button-item>
<ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
</ui5-segmented-button>
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
disableScrolling has been renamed, floatingFooter property has been removed and fixedFooter property has been added instead.Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
activeIcon property ha been remove, as the interaction is considered obsolete by the UX design team. if you previously used active-icon:<ui5-split-button id="sbTextActiveIcon" active-icon="accept">Active Icon</ui5-split-button>
it's wont take effect anymore even if set.
<ui5-menu header-text="My ui5-menu" busy busy-delay="100"><ui5-menu> <ui5-menu-item text="Open" icon="open-folder" busy busy-delay="100"><ui5-menu-item> now you should use loading and loadingDelay properties:
<ui5-menu header-text="My ui5-menu" loading loading-delay="100"><ui5-menu> <ui5-menu-item text="Open" icon="open-folder" loading loading-delay="100"><ui5-menu-item>
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.jsonimport "@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
The items-per-page-s, items-per-page-m, items-per-page-l properties are replaced by a single property items-per-page with value in the following format "S1 M2 L3"
Add XL size and refactor
chore: tests added
fix: xl test
refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties
Address code review coments
Address code review comments
Updates documentation
getPathData (function) instead of pathData (string)If you used icons like this:
import "@ui5/webcomponents-icons/dist/accept.js";
or like this:
import accept from "@ui5/webcomponents-icons/dist/accept.js";
there is no change and no adaptations are required.
In the rare case you imported pathData from icons, for example:
import { pathData, ltr, accData } from "@ui5/webcomponents-icons/dist/accept.js";
console.log(pathData); // String containing the SVG path
you must change your code to, for example:
import { getPathData, ltr, accData } from "@ui5/webcomponents-icons/dist/accept.js";
getPathData().then(pathData => {
console.log(pathData); // String containing the SVG path
});
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
Readme
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"; |
| Tag | ui5-tag | import "@ui5/webcomponents/dist/Tag.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 |
| Tag | ui5-tag | import "@ui5/webcomponents/dist/Tag.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 Item | ui5-li-group | import "@ui5/webcomponents/dist/ListItemGroup.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"; |
| 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-inputui5-textareaui5-checkboxui5-radio-buttonui5-date-pickerui5-selectwith 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.
FAQs
Unknown package
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 5 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
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.