Using Additional Features
Several UI5 Web Components packages offer additional features. This section explains what these are and how to use them.
What Are Additional Features​
These are features that logically belong to a component, but are not needed for the component's most common use cases, thus not part of the component's code by default.
The goal of features is to keep the components' code base minimal and allow users greater flexibility over what code to bundle.
If you intend to use a component's additional feature, your app must import it explicitly.
Importing Additional Features​
Import the feature file from the respective NPM package:
import "@ui5/<PACKAGE-NAME>/dist/features/<FEATURE-NAME>.js
Component features​
Currently, only a few components offer additional features:
Note: Features must be imported before all components modules, so that the feature is enabled before the components' definition.
For example:
import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js;";
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Link.js";
import "@ui5/webcomponents/dist/Input.js";
Framework features​
Note: Framework-level features must be imported before all components modules, so that the feature is enabled upon framework boot, before the components' definition.
For example:
import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js";
import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Link.js";
import "@ui5/webcomponents/dist/Input.js";