@ui5/webcomponents
Advanced tools
The UI5 Web Components are the new offering of UI5 to provide a set of reusable UI elements to you which can be used for your static web sites or for web application using any web framework of your choice with a minimalistic footprint. They allow you to create a consistent user experience aligned to the SAP Fiori Design Guidelines and incorporate the Fiori 3 design.
Web Components are a set of features which allow to enhance the HTML vocabulary with custom HTML elements when the standard HTML elements are not sufficient (for example, a Button with an icon or a DatePicker). The custom HTML elements allow to share those features and qualities in a standard way. The complexity of HTML, CSS and components behavior is encapsulated behind a custom HTML element. The interaction with the custom HTML elements is done using the standard DOM API.
OpenUI5 is a JS framework that lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice. It's based on JavaScript, using jQuery as its foundation and follows web standards. It eases your development with a client-side HTML5 rendering library including a rich set of controls and supports data binding to different data models (JSON, XML and OData).
UI5 Web Components…
UI5 Web Components are good for…
UI5 remains what it is: the best choice for…
To consume UI5 Web Components, first you need to install the NPM module:
npm install @ui5/webcomponents
Import the desired component(s) in your app to define the UI5 Web Component.
For example, to use ui5-button you need to import it:
import "@ui5/webcomponents/dist/Button"; // loads ui5-button
Then, you can use the custom element in an HTML page:
<ui5-button>Hello world!</ui5-button>
Currently only Chrome, Safari and Firefox support Web Components natively.
If your application should run on browsers without native Web Components support (Edge and/or IE11), import one the following modules before your first Web Component import:
import "@ui5/webcomponents-base/src/browsersupport/Edge";
import "@ui5/webcomponents-base/src/browsersupport/IE11";
Note: Importing the module for IE11 support automatically enables Edge support as well, so there is no need to import them both explicitly.
Example:
import "@ui5/webcomponents-base/src/browsersupport/IE11"; // This will enable Edge and IE11 support for all Web Components below
import "@ui5/webcomponents/dist/Button"; // loads ui5-button
import "@ui5/webcomponents/dist/Label"; // loads ui5-label
UI5 Web Components have built-in internalization and globalization support. Language, compact/cozy switch, date/time settings and theme can be changed with parameters.
To provide configuration settings, create a script tag having data-id="sap-ui-config" and type="application/json":
<script data-id="sap-ui-config" type="application/json">
{
"theme": "sap_belize",
"language": "EN"
}
</script>
UI5 Web Components support right-to-left text direction (RTL). To enable RTL globally, provide the option rtl: true in the configuration script tag:
<script data-id="sap-ui-config" type="application/json">
{
"language": "EN",
"rtl": true
}
</script>
UI5 Web Components supports Compact and Cozy mode. It is set to Cozy by default. To enable Compact globally, provide the option compactSize: true in the configuration script tag:
<script data-id="sap-ui-config" type="application/json">
{
"compactSize": true
}
</script>
UI5 Web Components support different calendar types (Gregorian, Islamic, Japanese, Buddhist and Persian). To change them, provide the option calendarType: "Islamic" in the configuration script tag:
<script data-id="sap-ui-config" type="application/json">
{
"calendarType": "Islamic"
}
</script>
You can clone the UI5 Web Components repository and start the Playground app with the following commands:
yarn # to install all dependencies
yarn start # to serve the project
This will open the Playground page in the browser!
To build the UI5 Web Components, just run the following commands:
yarn # to install all dependecies
yarn build # to build the project
Afterwards, you can find the static UI5 Web Components - Playground in the dist folder of the playground.
In a couple of guides we refer to the Yarn node package manager. This is because it offers functionality that the otherwise preferred npm package manager is currently lacking. Namely, the workspace setting which is currently used in the OpenUI5 (mono-)repository. Note that npm might add this feature in the future.
Keep in mind that linking the same module with npm and Yarn may cause issues. Also, Yarn can't work with links created by npm and vice versa.
ui5-table web component does not work on Internet Explorer 11placeholder attribute on Internet Explorer 11No major bugs known.
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.
0.12.0 (2019-06-10)
FAQs
UI5 Web Components: webcomponents.main
The npm package @ui5/webcomponents receives a total of 25,490 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.