@ui5/webcomponents-fiori NPM

UI5 Web Components - Fiori

Provides essential building blocks, necessary to implement the Fiori UX concept, such as a common header (ShellBar).

Provided components

Web Component	Tag name	Module import
Barcode Scanner Dialog	`ui5-barcode-scanner-dialog`	`import "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";`
Dynamic Side Content	`ui5-dynamic-side-content`	`import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";`
Flexible Column Layout	`ui5-flexible-column-layout`	`import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";`
Illustrated Message	`ui5-illustrated-message`	`import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";`
Media Gallery	`ui5-media-gallery`	`import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`
Media Gallery Item	`ui5-media-gallery-item`	comes with `ui5-media-gallery`
Notification List	`ui5-notification-list`	`import "@ui5/webcomponents-fiori/dist/NotifcationList.js";`
Notification List Item	`ui5-li-notification`	`import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";`
Notification Group List Item	`ui5-li-notification-group`	`import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";`
Notification Action	`ui5-notification-action`	`import "@ui5/webcomponents-fiori/dist/NotificationAction.js";`
Page	`ui5-page`	`import "@ui5/webcomponents-fiori/dist/Page.js";`
Product Switch	`ui5-product-switch`	`import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";`
Product Switch Item	`ui5-product-switch-item`	`import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`
Shell Bar	`ui5-shellbar`	`import "@ui5/webcomponents-fiori/dist/ShellBar.js";`
Shell Bar Item	`ui5-shellbar-item`	`import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";`
Side Navigation	`ui5-side-navigation`	`import "@ui5/webcomponents-fiori/dist/SideNavigation.js";`
Side Navigation Item	`ui5-side-navigation-item`	`import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";`
Side Navigation Sub Item	`ui5-side-navigation-sub-item`	`import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";`
Side Navigation Group	`ui5-side-navigation-group`	`import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";`
Timeline	`ui5-timeline`	`import "@ui5/webcomponents-fiori/dist/Timeline.js";`
Timeline Item	`ui5-timeline-item`	comes with `ui5-timeline`
Upload Collection	`ui5-upload-collection`	`import "@ui5/webcomponents-fiori/dist/UploadCollection.js";`
Upload Collection Item	`ui5-upload-collection-item`	`import "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js";`
User Menu	`ui5-user-menu`	`import "@ui5/webcomponents-fiori/dist/UserMenu.js";`
User Menu Account	`ui5-user-menu-account`	`import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";`
User Menu Item	`ui5-user-menu-item`	`import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";`
View Settings Dialog	`ui5-view-settings-dialog`	`import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";`
View Settings Dialog - Sort Item	`ui5-sort-item`	`import "@ui5/webcomponents-fiori/dist/SortItem.js";`
View Settings Dialog - Filter Item	`ui5-filter-item`	`import "@ui5/webcomponents-fiori/dist/FilterItem.js";`
View Settings Dialog - Filter Item Option	`ui5-filter-item-option`	`import "@ui5/webcomponents-fiori/dist/FilterItemOption.js";`
Wizard	`ui5-wizard`	`import "@ui5/webcomponents-fiori/dist/Wizard.js";`
Wizard Step	`ui5-wizard-step`	comes with `ui5-wizard`

Provided assets

import "@ui5/webcomponents-fiori/dist/Assets.js";

Assets	Module	Notes
`i18n`, `themes`	`@ui5/webcomponents-fiori/dist/Assets.js`	Theming parameters and translations for the components Automatically imports also: `@ui5/webcomponents/dist/Assets.js`

Resources

Support

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.

UI5 Web Components - Fiori

Provided components

Provided assets

Resources

Support

Contribute

License