UI5 Web Components: webcomponents.main
npm install @ui5/webcomponents
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"; |
| 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"; |
| ButtonBadge | ui5-button-badge | import "@ui5/webcomponents/dist/ButtonBadge.js"; |
| Calendar | ui5-calendar | import "@ui5/webcomponents/dist/Calendar.js"; |
| Calendar Date | ui5-date | comes with ui5-calendar |
| Calendar Date Range | ui5-date-range | comes with ui5-calendar |
| Calendar Special Date | ui5-date-special | comes with ui5-calendar |
| Calendar Legend | ui5-calendar-legend | import "@ui5/webcomponents/dist/CalendarLegend.js"; |
| Calendar Legend Item | ui5-calendar-legend-item | comes with ui5-calendar-legend |
| 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 | import "@ui5/webcomponents/dist/ColorPalettePopover.js"; |
| Color Picker | ui5-color-picker | import "@ui5/webcomponents/dist/ColorPicker.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/ListItemStandard.js"; |
| List - Custom Item | ui5-li-custom | import "@ui5/webcomponents/dist/ListItemCustom.js"; |
| List - Group Item | ui5-li-group | import "@ui5/webcomponents/dist/ListItemGroup.js"; |
| Menu | ui5-menu | import "@ui5/webcomponents/dist/Menu.js"; |
| Menu Item | ui5-menu-item | comes with ui5-menu |
| Menu Separator | ui5-menu-separator | comes with ui5-menu |
| 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 Item Group| ui5-mcb-item-group | 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 |
| Tree Item Custom | ui5-tree-item-custom | 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
| Feature name | Affects | Triggered by | Description |
|--------------------------|-------------------------------------------------------|-----------------------------------------|---------------------------------------------------------------------------------------------------------|
| More Colors Dialog | ui5-color-palette, ui5-color-palette-popover | Setting showMoreColors to true | Support for "more colors dialog" for the color palette component |
| Input Suggestions | ui5-input, ui5-multi-input | Setting showSuggestions to true | Support for input suggestions while typing |
The ui5-color-palette component has a showMoreColors property, that, when set to true, enables a "More colors" dialog.
Since this functionality is not always needed, the "More colors" dialog and its children are not direct dependencies of the component by default,
and are only loaded dynamically when showMoreColors is set to true.
Feature import (optional as of 2.7.0):
``js`
import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";
You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so.
The element acts as an 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 itself.
Setting the showSuggestions property to true loads the suggestions feature dynamically (as well as the ui5-suggestion-item component) for your convenience.
Feature import (optional as of 2.7.0):
`js`
import "@ui5/webcomponents/dist/features/InputSuggestions.js";
You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so.