Product
Socket Now Supports uv.lock Files
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
By Trevor Norris - Jan 09, 2025
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@ui5/webcomponents
Advanced tools
UI5 Web Components - Main
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"; |
| Badge | ui5-badge | import "@ui5/webcomponents/dist/Badge.js"; |
| Busy Indicator | ui5-busyindicator | import "@ui5/webcomponents/dist/BusyIndicator.js"; |
| Button | ui5-button | import "@ui5/webcomponents/dist/Button.js"; |
| Card | ui5-card | import "@ui5/webcomponents/dist/Card.js"; |
| Carousel | ui5-carousel | import "@ui5/webcomponents/dist/Carousel.js"; |
| Checkbox | ui5-checkbox | import "@ui5/webcomponents/dist/CheckBox.js"; |
| ComboBox | ui5-combobox | import "@ui5/webcomponents/dist/ComboBox.js"; |
| ComboBox Item | ui5-cb-item | comes with ui5-combobox |
| Date Picker | ui5-date-picker | import "@ui5/webcomponents/dist/DatePicker.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"; |
| Message Strip | ui5-messagestrip | import "@ui5/webcomponents/dist/MessageStrip.js"; |
| Multi ComboBox | ui5-multi-combobox | import "@ui5/webcomponents/dist/MultiComboBox.js"; |
| Multi ComboBox Item | ui5-mcb-item | import "@ui5/webcomponents/dist/MultiComboBoxItem.js"; |
| Panel | ui5-panel | import "@ui5/webcomponents/dist/Panel.js"; |
| Popover | ui5-popover | import "@ui5/webcomponents/dist/Popover.js"; |
| Radio Button | ui5-radiobutton | import "@ui5/webcomponents/dist/RadioButton.js"; |
| Responsive Popover | ui5-responsive-popover | import "@ui5/webcomponents/dist/ResponsivePopover.js"; |
| Select | ui5-select | import "@ui5/webcomponents/dist/Select.js"; |
| Select Option | ui5-option | comes with ui5-select |
| Segmented Button | ui5-segmentedbutton | import "@ui5/webcomponents/dist/SegmentedButton.js"; |
| Suggestion Item | ui5-suggestion-item | import "@ui5/webcomponents/dist/SuggestionItem.js"; |
| 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 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-togglebutton | import "@ui5/webcomponents/dist/ToggleButton.js"; |
For a complete list of all public module imports from the main package, click here:
Resources
- UI5 Web Components - README.md
- UI5 Web Components - Home Page
- UI5 Web Components - Playground and API Reference
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.
1.0.0-rc.11 (2020-12-21)
New components
- ui5-avatar-group: introduce new component (#2524) (ae926ee), closes #2409
- ui5-bar: introduce new component (#2533) (5c601cd), closes #2434
- ui5-calendar: introduce new component. (#2424) (5470e23), closes #1730
- ui5-slider: introduce new component (#2349) (2b9008c)
- ui5-range-slider: introduce new component (#2310) (9dea3b3)
Bug Fixes
- ui5-avatar: fix XS size (#2582) (9661ab8)
- ui5-badge: enable letter spacing overwrite (#2493) (cca0d5d), closes #2451
- ui5-badge: fix RTL appearance (#2569) (5f6d8fc)
- ui5-button: hide icon tooltip (#2566) (1b07955)
- ui5-calendar: keyboard navigation in the picker grid now works properly (#2532) (371d12d)
- ui5-card: correct aria-labelledBy to card and header (#2577) (2647941), closes #2426
- ui5-carousel: add all visible items to tab chain (#2530) (37ee83f), closes #1996
- ui5-date-picker: fixing the min and max date in timezones half hour difference (#2544) (766bcc0), closes #2542
- ui5-datepicker: keyboard navigation works properly (#2549) (66cd1d7)
- ui5-daterange-picker: all tests are now enabled (#2506) (33442e9), closes #2475
- ui5-daterange-picker: fix RenderScheduler import (#2476) (13ff13e)
- ui5-dialog: apply initial focus after rendering (#2551) (dba0265), closes #2537
- ui5-input: aria-required attribute removed (#2552) (7456ab5)
- ui5-input: don't render aria-describedby if not neccessary (#2512) (e7dd012)
- ui5-li-custom: prevent firing of events (#2462) (3f66c06)
- ui5-list: remove focus trap for empty list (#2411) (5f8e0e2)
- ui5-popover: correct arrow position on RTL (#2488) (3b81ad8), closes #2387
- ui5-select: remove aria-roledescription (#2463) (973a80d), closes #2358
- ui5-shellbar: fix overlapping of the search box over icons (#2155) (3597902), closes #2044
- ui5-slider: fix input event and tickmarks display (#2508) (0cbc0bd)
- ui5-table: improve accessibility (#2534) (e06d6f3)
- ui5-textarea: announce required textarea (#2385) (c2baf6b)
- ui5-tree: make the height of tree adjustable (#2546) (1fc3180), closes #2545
- ui5-upload-collection: fire drop only when files are dropped within dnd overlay (#2527) (455f614)
- ui5-wizard: correct phone breakpoint size (#2596) (c98d9ba)
- ui5-wizard: fix styling issues (#2547) (65cb42f), closes #2523
- build error on MacOS 11 from rollup-plugin-terser (#2515) (0629fac)
Features
- framework: Change child-parent invalidation API (#2541) (a1a3f80)
- ui5-button: support title attribute (#2492) (7ae9253)
- ui5-combobox: аdd two-column layout support (#2503) (679362d), closes #2450
- ui5-date-picker: component is now aligned with the specification (#2304) (30d9d2b), closes #2151
- ui5-flexible-column-layout: add start/mid/endColumnAccessibleName properties (#2483) (fb0b24c)
- ui5-mcb: introduces filter property (#2088) (03cae4b)
- ui5-mcb-item: implement stable-dom-ref property (#2418) (6e4a156)
- ui5-option: provide stableDomRef (#2366) (50304f5), closes #1718
- ui5-popover: implement hide-block-layer property (#2413) (3b2d6de)
- ui5-side-navigation: add "header" slot (#2520) (b5c4a92), closes #2518
- ui5-side-navigation-item, ui5-side-navigation-sub-item: introduce click event (#2298) (d73ce38)
- ui5-table: add "loadMore" capability (#2589) (2e5d5cd)
BREAKING CHANGE
The startColumnAccessibleName, midColumnAccessibleName and endColumnAccessibleName properties have been removed. Use the new accessibilityTexts property to provide these (as keys to the object).
Timeline component has been moved to the "fiori" package.
If previously had:
import Timeline from "@ui5/webcomponents/dist/Timeline.js";
you have to change it to:
import Timeline from "@ui5/webcomponents-fiori/dist/Timeline.js";
If you previously used ui5-notification-overflow-action and had the following import statement:
import "@ui5/webcomponents-fiori/dist/NotificationOverflowAction.js";
now you have to use the ui5-notification-action tag and import the following module:
import "@ui5/webcomponents-fiori/dist/NotificationAction.js";
FAQs
UI5 Web Components: webcomponents.main
The npm package @ui5/webcomponents receives a total of 17,656 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 5 open source maintainers collaborating on the project.
Package last updated on 21 Dec 2020
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.
Related posts
Research
Security News
Gmail For Exfiltration: Malicious npm Packages Target Solana Private Keys and Drain Victims' Wallets
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.
By Kirill Boychenko - Jan 08, 2025
Security News
New Python Packaging Proposal Aims to Solve Phantom Dependency Problem with SBOMs
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
By Sarah Gooding - Jan 07, 2025