@ui5/webcomponents

1.24.3 • Public • Published

UI5 icon

UI5 Web Components - Main

npm Package Version

Provides general purpose UI building blocks such as buttons, labels, inputs and popups.

Provided components

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";
Badge ui5-badge import "@ui5/webcomponents/dist/Badge.js";
Breadcrumbs ui5-breadcrumbs import "@ui5/webcomponents/dist/Breadcrumbs.js";
Breadcrumbs Item ui5-breadcrumbs-item comes with ui5-breadcrumbs
Badge ui5-badge import "@ui5/webcomponents/dist/Badge.js";
Busy Indicator ui5-busy-indicator import "@ui5/webcomponents/dist/BusyIndicator.js";
Button ui5-button import "@ui5/webcomponents/dist/Button.js";
Calendar ui5-calendar import "@ui5/webcomponents/dist/Calendar.js";
Calendar Date ui5-calendar-date comes with ui5-calendar
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 comes with ui5-color-palette-popover
Color Picker ui5-color-picker import "@ui5/webcomponents/dist/ComboPicker.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/StandardListItem.js";
List - Custom Item ui5-li-custom import "@ui5/webcomponents/dist/CustomListItem.js";
List - Group Header Item ui5-li-groupheader import "@ui5/webcomponents/dist/GroupHeaderListItem.js";
Menu ui5-menu import "@ui5/webcomponents/dist/Menu.js";
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 Group Item ui5-mcb-group-item 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";
Table ui5-table import "@ui5/webcomponents/dist/Table.js";
Table Column ui5-table-column import "@ui5/webcomponents/dist/TableColumn.js";
Table Row ui5-table-row import "@ui5/webcomponents/dist/TableRow.js";
Table Group Row ui5-table-group-row import "@ui5/webcomponents/dist/TableGroupRow.js";
Table Cell ui5-table-cell import "@ui5/webcomponents/dist/TableCell.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

Provided assets

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

Provided features

import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js
Affects Feature Import Description
ui5-color-palette @ui5/webcomponents/dist/features/ColorPaletteMoreColors.js Support for "more colors dialog" for the color palette component
ui5-input @ui5/webcomponents/dist/features/InputSuggestions.js Support for input suggestions while typing
Multiple (ui5-input, ui5-date-picker, etc...) @ui5/webcomponents/dist/features/InputElementsFormSupport.js Support for using input components in forms

Color Palette "More Colors" Feature

import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";

The ui5-color-palette component has a showMoreColors property, that, when set to true, enables a "More colors" dialog. Since this is not always needed, in order to use this dialog, you must import the above feature.

Input Suggestions Feature

import "@ui5/webcomponents/dist/features/InputSuggestions.js";

The <ui5-input> element acts as an <input> 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 <ui5-input> itself.

To enable the functionality, import the above module into your app. This will also automatically import ui5-suggestion-item for your convenience.

Form Support Feature

import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

HTML <form> only submits a couple of standard HTML elements such as <input> and <textarea> to name a few.

Web Components that function as inputs, such as UI5's <ui5-input>, <ui5-checkbox>, <ui5-textarea> are therefore not submitted by the form out of the box.

Generally, this is not an issue, as very few modern applications submit forms in the classic way.

However, if you need to submit forms, you can import the module above, and it will enrich:

  • ui5-input
  • ui5-textarea
  • ui5-checkbox
  • ui5-radio-button
  • ui5-date-picker
  • ui5-select

with functionality, allowing them to be submitted in forms (provided you set their name attribute) just as any standard HTML input element would be.

How to submit a form

There are two ways of submitting a form:

  1. The ui5-button element will be able to submit the closest form it's placed in, provided you set its submits attribute.
  2. Pressing Enter while a form control is focused. (Note: ui5-textarea is the only exception. If Enter is pressed while ui5-textarea is focused, it will result in a new line).

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.

Contribute

Please check our Contribution Guidelines.

License

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.

Readme

Keywords

Package Sidebar

Install

npm i @ui5/webcomponents

Weekly Downloads

36,976

Version

1.24.3

License

Apache-2.0

Unpacked Size

19.2 MB

Total Files

2403

Last publish

Collaborators

  • ui5-webc-bot
  • nnaydenow
  • vladitasev
  • adr1ann
  • ilhan007