Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@ui5/webcomponents-icons
Advanced tools
Provides assets for the rich SAP-icons
icon collection.
Icon asset | Module import |
---|---|
All icons (~115KB zipped) | import "@ui5/webcomponents-icons/dist/AllIcons.js"; |
Accelerated icon | import "@ui5/webcomponents-icons/dist/accelerated.js"; |
Accept icon | import "@ui5/webcomponents-icons/dist/accept.js"; |
... | ... |
Zoom out icon | import "@ui5/webcomponents-icons/dist/zoom-out.js"; |
Note: The @ui5/webcomponents-icons
package does not provide any web components per se, but rather icon assets,
usable by other web components such as ui5-icon
. You could import all icons, but it's recommended to import
just the ones that your app will actually use.
Note: For a full list of the icons in the SAP-icons
collection, click here.
import "@ui5/webcomponents-fiori/dist/Assets.js";
Assets | Module | Notes |
---|---|---|
i18n | @ui5/webcomponents-icons/dist/Assets.js | Translations for the tooltips / "aria labels" of several icons |
As SAP Icons is the default icon collection, you can skip the collection name and just set the name of the icon:
<ui5-icon name="accept"></ui5-icon>
The package provides two versions of each icon (SAP Icons v4 and SAP Icons v5). If you don't specify a collection name like in the example above,
the framework will detect the current theme and render the corresponding icon - SAP Icons v5
for SAP Horizon theme family (sap_horizon, sap_horizon_dark, etc.), and SAP Icons v4
for all the rest (sap_fiori_3, sap_fiori_3_dark, etc.).
SAP-icon-v4
and SAP-icon-v5
In case you want to always display the SAP Icons v5
icons in all themes, you can set it explicitly via the SAP-icon-v5
collection name:
<ui5-icon name="SAP-icon-v5/accept"></ui5-icon>
The same applies if you want to always display the SAP Icons v4
icons. You can set it explicitly via the SAP-icon-v4
collection name:
<ui5-icon name="SAP-icon-v4/accept"></ui5-icon>
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.4 (2024-05-29)
after-close
to close
(#8967) (d05839d)open
property (#9001) (1c1cea6)Before the ui5-input suggestions popover could be opened by calling openPicker()
:
const input = document.getElementById("exampleID");
input.openPicker();
Now the suggestions popover is opened by setting the open
property to true:
const input = document.getElementById("exampleID");
input.open = true;
Highlight
enum should be imported differently.
Before:import HighlightTypes from "@ui5/webcomponents-base/dist/types/HighlightTypes.js";
Now:
import Highlight from "@ui5/webcomponents-base/dist/types/Highlight.js";
Before:
<ui5-toolbar-button icon="home" icon-end>Button</ui5-toolbar-button>
Now:
<ui5-toolbar-button end-icon="home">Button</ui5-toolbar-button>
or
<ui5-toolbar-button icon="employee" end-icon="home">Button</ui5-toolbar-button>
ui5-list
, ui5-notification-list
should be used as a container for ui5-li-notification-group
and ui5-li-notification
components.Previously the application developers were defining notifications in this way:
<ui5-list>
<ui5-li-notification-group title-text="Group Title" >
<ui5-li-notification..
To support accessibility, developers should now use the ui5-notification-list
as seen below:
<ui5-notification-list>
<ui5-li-notification-group title-text="Group Title" >
<ui5-li-notification..
showCoPilot
property of the ui5-shellbar
is removed.If you have previously used the showCoPilot
property:
<ui5-shellbar show-co-pilot></ui5-shellbar>
it will no longer work for the component.
CoPilotAnimation
feature of the ui5-shellbar
is removed.If you have previously used the CoPilotAnimation
feature:
import CoPilotAnimation from "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"
it will no longer work for the component.
copilotDomRef
getter of the ui5-shellbar
is removed.If you have previously used the copilotDomRef
public getter:
shellbar.copilotDomRef
it will no longer work for the component.
co-pilot-click
event of the ui5-shellbar
is removed.
If you have previously used the co-pilot-click
public event:shellbar.addEventListener("ui5-co-pilot-click", function(event) {
...
});
it will no longer work for the component.
You can achieve similar functionality with the new slot:
HTML:
<ui5-shellbar>
<ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
</ui5-shellbar>
JavaScript:
assistant.addEventListener("click", function (event) {
const toggleButton = event.target;
toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da";
});
SelectMenu & SelectMenuOption Changed item Old New SelectMenu ui5-select-menu removed SelectMenuOption ui5-select-menu-option ui5-option-custom If you have previously used the ui5-select-menu and ui5-select-menu-option:
<ui5-select menu="selectMenu"></ui5-select>
<ui5-select-menu id="selectMenu"> <ui5-select-menu-option> <div class="optionContent">custom</div> </ui5-select-menu-option> </ui5-select-menu> Now use just ui5-select and ui5-option-custom instead: <ui5-select> <ui5-option-custom> <div class="optionContent">custom</div> </ui5-option-custom> </ui5-select> Select Changed item Old New property menu removed The menu property of the ui5-select is removed. * **ui5-button:** iconEnd property is changed from boolean to string type and now can accept name for second/end icon.Before:
<ui5-button icon="home" icon-end>Button</ui5-button>
Now:
<ui5-button end-icon="home">Button</ui5-button>
or
<ui5-button icon="employee" end-icon="home">Button</ui5-button>
after-close
event has been renamed to close
. If you previously used it like:toast.addEventListener("after-close", (event) => {
});
Now you have to use it like:
toast.addEventListener("close", (event) => {
});
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
features/InputElementsFormSupport.js
feature has been deleted and now, form elements works natively in form elements.Previously date ranges were declared as follows:
<ui5-calendar selection-mode="Range"> <ui5-date value="Jan 20, 2021"></ui5-date> <ui5-date value="Jan 30, 2021"></ui5-date> </ui5-calendar>Now they are declared using a ui5-date-range:
<ui5-calendar selection-mode="Range"> <ui5-date-range start-value="Jan 20, 2021" end-value="Jan 30, 2021"></ui5-date-range> </ui5-calendar> * **ui5-popup:** Event names `after-close` and `after-open` are now named `close` and `open`. Previously the application developers could subscribe to the events as follows: ```ts popup.addEventListener("after-open", function() { //... }); popup.addEventListener("after-close", function() { //... }); ```Now the application developers should include the ui5-bar as follows:
popup.addEventListener("open", function() {
//...
});
popup.addEventListener("close", function() {
//...
});
hideBackdrop
is removed.Previously the application developers could define a modal popover without visible backdrop as follows:
<ui5-popover modal hide-backdrop>
Now the application developers can use the standard ::backdrop
CSS selector
<style>
.transparentBackdrop::backdrop {
background: transparent;
}
</style>
...
<ui5-popover modal class="transparentBackdrop">
FAQs
UI5 Web Components: webcomponents.SAP-icons
The npm package @ui5/webcomponents-icons receives a total of 40,240 weekly downloads. As such, @ui5/webcomponents-icons popularity was classified as popular.
We found that @ui5/webcomponents-icons 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.