diff --git a/skills/catalog/SKILL.md b/skills/catalog/SKILL.md new file mode 100644 index 0000000000000..75a966bed91c1 --- /dev/null +++ b/skills/catalog/SKILL.md @@ -0,0 +1,108 @@ +--- +name: catalog +description: Use when selecting UI5 Web Components for an application or identifying a component's tag name, package, or ESM import. Do not use for component APIs, behavior, or implementation guidance. +user-invocable: false +--- + +# UI5 Web Components catalog + +[The UI5 Web Components](https://ui5.github.io/webcomponents/docs/) project offers a rich set of enterprise-grade, reusable UI elements built on top of the Web Components standards. With UI5 Web Components, developers can leverage a powerful, flexible, and future-proof toolkit to create anything from static web sites to complex web applications. + +## Main + +| Component | Brief description | HTML tag | ESM import | Source | +| --- | --- | --- | --- | --- | +| Avatar | An image-like component that has different display options for representing images and icons | `` | `import "@ui5/webcomponents/dist/Avatar.js";` | [Docs](https://ui5.github.io/webcomponents/components/Avatar) | +| AvatarGroup | Displays a group of avatars arranged horizontally. It is useful to visually Derived: page has no ES6 import example. | `` | `import "@ui5/webcomponents/dist/AvatarGroup.js";` | [Docs](https://ui5.github.io/webcomponents/components/AvatarGroup) | +| Bar | The Bar is a container which is primarily used to hold titles, buttons and input elements | `` | `import "@ui5/webcomponents/dist/Bar.js";` | [Docs](https://ui5.github.io/webcomponents/components/Bar) | +| Breadcrumbs | Enables users to navigate between items by providing a list of links to previous steps in the user's navigation path. Derived: page has no ES6 import example. | `` | `import "@ui5/webcomponents/dist/Breadcrumbs.js";` | [Docs](https://ui5.github.io/webcomponents/components/Breadcrumbs) | +| BusyIndicator | The ui5-busy-indicator signals that some operation is going on and that the | `` | `import "@ui5/webcomponents/dist/BusyIndicator.js";` | [Docs](https://ui5.github.io/webcomponents/components/BusyIndicator) | +| Button | The ui5-button component represents a simple push button. | `` | `import "@ui5/webcomponents/dist/Button.js";` | [Docs](https://ui5.github.io/webcomponents/components/Button) | +| Calendar | The ui5-calendar component allows users to select one or more dates. | `` | `import "@ui5/webcomponents/dist/Calendar.js";` | [Docs](https://ui5.github.io/webcomponents/components/Calendar) | +| CalendarLegend | The ui5-calendar-legend component is designed for use within the ui5-calendar to display a legend. | `` | `import "@ui5/webcomponents/dist/CalendarLegend.js";` | [Docs](https://ui5.github.io/webcomponents/components/CalendarLegend) | +| Card | The ui5-card is a component that represents information in the form of a | `` | `import "@ui5/webcomponents/dist/Card.js";` | [Docs](https://ui5.github.io/webcomponents/components/Card) | +| Carousel | The Carousel allows the user to browse through a set of items. | `` | `import "@ui5/webcomponents/dist/Carousel.js";` | [Docs](https://ui5.github.io/webcomponents/components/Carousel) | +| CheckBox | Allows the user to set a binary value, such as true/false or yes/no for an item. | `` | `import "@ui5/webcomponents/dist/CheckBox.js";` | [Docs](https://ui5.github.io/webcomponents/components/CheckBox) | +| ColorPalette | The ui5-color-palette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme. | `` | `import "@ui5/webcomponents/dist/ColorPalette.js";` | [Docs](https://ui5.github.io/webcomponents/components/ColorPalette) | +| ColorPalettePopover | Represents a predefined range of colors for easier selection. | `` | `import @ui5/webcomponents/dist/ColorPalettePopover.js";` | [Docs](https://ui5.github.io/webcomponents/components/ColorPalettePopover) | +| ColorPicker | The ui5-color-picker allows users to choose any color and provides different input options for selecting colors. | `` | `import "@ui5/webcomponents/dist/ColorPicker.js";` | [Docs](https://ui5.github.io/webcomponents/components/ColorPicker) | +| ComboBox | The ui5-combobox component represents a drop-down menu with a list of the available options and a text input field to narrow down the options. | `` | `import "@ui5/webcomponents/dist/ComboBox.js";` | [Docs](https://ui5.github.io/webcomponents/components/ComboBox) | +| DatePicker | The ui5-date-picker component provides an input field with assigned calendar which opens on user action. | `` | `import "@ui5/webcomponents/dist/DatePicker.js";` | [Docs](https://ui5.github.io/webcomponents/components/DatePicker) | +| DateRangePicker | The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar. | `` | `import "@ui5/webcomponents/dist/DateRangePicker.js";` | [Docs](https://ui5.github.io/webcomponents/components/DateRangePicker) | +| DateTimePicker | The DateTimePicker component alows users to select both date (day, month and year) and time (hours, minutes and seconds) | `` | `import "@ui5/webcomponents/dist/DateTimePicker.js";` | [Docs](https://ui5.github.io/webcomponents/components/DateTimePicker) | +| Dialog | The ui5-dialog component is used to temporarily display some information in a | `` | `import "@ui5/webcomponents/dist/Dialog";` | [Docs](https://ui5.github.io/webcomponents/components/Dialog) | +| DynamicDateRange | The ui5-dynamic-date-range component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., "Today", "Yesterday", etc.). | `` | `import "@ui5/webcomponents/dist/DynamicDateRange.js";` | [Docs](https://ui5.github.io/webcomponents/components/DynamicDateRange) | +| ExpandableText | The ui5-expandable-text component allows displaying a large body of text in a small space. It provides an "expand/collapse" functionality, which shows/hides potentially truncated text. | `` | `import "@ui5/webcomponents/dist/ExpandableText";` | [Docs](https://ui5.github.io/webcomponents/components/ExpandableText) | +| FileUploader | The ui5-file-uploader opens a file explorer dialog and enables users to upload files. | `` | `import "@ui5/webcomponents/dist/FileUploader.js";` | [Docs](https://ui5.github.io/webcomponents/components/FileUploader) | +| Form | The Form is a layout component that arranges labels and form fields (like input fields) pairs Derived: page has no ES6 import example. | `` | `import "@ui5/webcomponents/dist/Form.js";` | [Docs](https://ui5.github.io/webcomponents/components/Form) | +| Icon | The ui5-icon component represents an SVG icon. | `` | `import "@ui5/webcomponents/dist/Icon.js";` | [Docs](https://ui5.github.io/webcomponents/components/Icon) | +| Input | The ui5-input component allows the user to enter and edit text or numeric values in one line. | `` | `import "@ui5/webcomponents/dist/Input.js";` | [Docs](https://ui5.github.io/webcomponents/components/Input) | +| Label | The ui5-label is a component used to represent a label for elements like input, textarea, select. | `` | `import "@ui5/webcomponents/dist/Label";` | [Docs](https://ui5.github.io/webcomponents/components/Label) | +| Link | The ui5-link is a hyperlink component that is used to navigate to other | `` | `import "@ui5/webcomponents/dist/Link";` | [Docs](https://ui5.github.io/webcomponents/components/Link) | +| List | The ui5-list component allows displaying a list of items, advanced keyboard | `` | `import "@ui5/webcomponents/dist/List.js";` | [Docs](https://ui5.github.io/webcomponents/components/List) | +| Menu | ui5-menu component represents a hierarchical menu structure. | `` | `import "@ui5/webcomponents/dist/Menu.js";` | [Docs](https://ui5.github.io/webcomponents/components/Menu) | +| MessageStrip | The ui5-message-strip component allows for the embedding of application-related messages. | `` | `import "@ui5/webcomponents/dist/MessageStrip.js";` | [Docs](https://ui5.github.io/webcomponents/components/MessageStrip) | +| MultiComboBox | The ui5-multi-combobox component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items. | `` | `import "@ui5/webcomponents/dist/MultiComboBox.js";` | [Docs](https://ui5.github.io/webcomponents/components/MultiComboBox) | +| MultiInput | A ui5-multi-input field allows the user to enter multiple values, which are displayed as ui5-token. | `` | `import "@ui5/webcomponents/dist/MultiInput.js";` | [Docs](https://ui5.github.io/webcomponents/components/MultiInput) | +| NumberInput | URL no longer has component documentation. | `` | `Unavailable — source URL returned HTTP 404` | [Docs](https://ui5.github.io/webcomponents/components/NumberInput) | +| Panel | The ui5-panel component is a container which has a header and a | `` | `import "@ui5/webcomponents/dist/Panel.js";` | [Docs](https://ui5.github.io/webcomponents/components/Panel) | +| Popover | The ui5-popover component displays additional information for an object | `` | `import "@ui5/webcomponents/dist/Popover.js";` | [Docs](https://ui5.github.io/webcomponents/components/Popover) | +| ProgressIndicator | Shows the progress of a process in a graphical way. To indicate the progress, | `` | `import "@ui5/webcomponents/dist/ProgressIndicator.js";` | [Docs](https://ui5.github.io/webcomponents/components/ProgressIndicator) | +| RadioButton | The ui5-radio-button component enables users to select a single option from a set of options. | `` | `import "@ui5/webcomponents/dist/RadioButton";` | [Docs](https://ui5.github.io/webcomponents/components/RadioButton) | +| RangeSlider | Represents a numerical interval and two handles (grips) to select a sub-range within it. | `` | `import "@ui5/webcomponents/dist/RangeSlider.js";` | [Docs](https://ui5.github.io/webcomponents/components/RangeSlider) | +| RatingIndicator | The Rating Indicator is used to display a specific number of icons that are used to rate an item. | `` | `import "@ui5/webcomponents/dist/RatingIndicator.js";` | [Docs](https://ui5.github.io/webcomponents/components/RatingIndicator) | +| ResponsivePopover | The ui5-responsive-popover acts as a Popover on desktop and tablet, while on phone it acts as a Dialog. | `` | `import "@ui5/webcomponents/dist/ResponsivePopover.js";` | [Docs](https://ui5.github.io/webcomponents/components/ResponsivePopover) | +| SegmentedButton | The ui5-segmented-button shows a group of items. When the user clicks or taps | `` | `import "@ui5/webcomponents/dist/SegmentedButton.js";` | [Docs](https://ui5.github.io/webcomponents/components/SegmentedButton) | +| Select | The ui5-select component is used to create a drop-down list. | `` | `import "@ui5/webcomponents/dist/Select";` | [Docs](https://ui5.github.io/webcomponents/components/Select) | +| Slider | The Slider component represents a numerical range and a handle (grip). | `` | `import "@ui5/webcomponents/dist/Slider.js";` | [Docs](https://ui5.github.io/webcomponents/components/Slider) | +| SplitButton | ui5-split-button enables users to trigger actions. It is constructed of two separate actions - | `` | `import "@ui5/webcomponents/dist/SplitButton.js";` | [Docs](https://ui5.github.io/webcomponents/components/SplitButton) | +| StepInput | The ui5-step-input consists of an input field and buttons with icons to increase/decrease the value | `` | `import "@ui5/webcomponents/dist/StepInput.js";` | [Docs](https://ui5.github.io/webcomponents/components/StepInput) | +| Switch | The ui5-switch component is used for changing between binary states. | `` | `import "@ui5/webcomponents/dist/Switch";` | [Docs](https://ui5.github.io/webcomponents/components/Switch) | +| TabContainer | The ui5-tabcontainer represents a collection of tabs with associated content. | `` | `import "@ui5/webcomponents/dist/TabContainer.js";` | [Docs](https://ui5.github.io/webcomponents/components/TabContainer) | +| Table | The ui5-table component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner. | `` | `import "@ui5/webcomponents/dist/Table.js";` | [Docs](https://ui5.github.io/webcomponents/components/Table) | +| Tag | The ui5-tag is a component which serves | `` | `import "@ui5/webcomponents/dist/Tag.js";` | [Docs](https://ui5.github.io/webcomponents/components/Tag) | +| Text | The ui5-text component displays text that can be used in any content area of an application. | `` | `import "@ui5/webcomponents/dist/Text";` | [Docs](https://ui5.github.io/webcomponents/components/Text) | +| TextArea | The ui5-textarea component is used to enter multiple rows of text. | `` | `import "@ui5/webcomponents/dist/TextArea.js";` | [Docs](https://ui5.github.io/webcomponents/components/TextArea) | +| TimePicker | The ui5-time-picker component provides an input field with assigned clocks which are opened on user action. | `` | `import "@ui5/webcomponents/dist/TimePicker.js";` | [Docs](https://ui5.github.io/webcomponents/components/TimePicker) | +| Title | The ui5-title component is used to display titles inside a page. | `` | `import "@ui5/webcomponents/dist/Title.js";` | [Docs](https://ui5.github.io/webcomponents/components/Title) | +| Toast | The ui5-toast is a small, non-disruptive popup for success or information messages that | `` | `import "@ui5/webcomponents/dist/Toast.js";` | [Docs](https://ui5.github.io/webcomponents/components/Toast) | +| ToggleButton | The ui5-toggle-button component is an enhanced ui5-button | `` | `import "@ui5/webcomponents/dist/ToggleButton.js";` | [Docs](https://ui5.github.io/webcomponents/components/ToggleButton) | +| Token | Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. | `` | `import "@ui5/webcomponents/dist/Token.js";` | [Docs](https://ui5.github.io/webcomponents/components/Token) | +| Tokenizer | This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change. | `` | `import "@ui5/webcomponents/dist/Tokenizer.js";` | [Docs](https://ui5.github.io/webcomponents/components/Tokenizer) | +| Toolbar | The ui5-toolbar component is used to create a horizontal layout with items. | `` | `import "@ui5/webcomponents/dist/Toolbar.js";` | [Docs](https://ui5.github.io/webcomponents/components/Toolbar) | +| Tree | The ui5-tree component provides a tree structure for displaying data in a hierarchy. | `` | `import "@ui5/webcomponents/dist/Tree.js";` | [Docs](https://ui5.github.io/webcomponents/components/Tree) | + +## Fiori + +| Component | Brief description | HTML tag | ESM import | Source | +| --- | --- | --- | --- | --- | +| BarcodeScannerDialog | The BarcodeScannerDialog component provides barcode scanning functionality for all devices that support the MediaDevices.getUserMedia() native API. Derived: page has no ES6 import example. | `` | `import "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/BarcodeScannerDialog) | +| DynamicPage | A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer. | `` | `import "@ui5/webcomponents-fiori/dist/DynamicPage.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/DynamicPage) | +| DynamicSideContent | The DynamicSideContent (ui5-dynamic-side-content) is a layout component that allows additional content | `` | `import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/DynamicSideContent) | +| FlexibleColumnLayout | The FlexibleColumnLayout implements the list-detail-detail paradigm by displaying up to three pages in separate columns. | `` | `import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/FlexibleColumnLayout) | +| HeroBanner | The following entity is available under an experimental flag and its API and behavior are subject to change. | `` | `import "@ui5/webcomponents-fiori/dist/HeroBanner.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/HeroBanner) | +| IllustratedMessage | An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging | `` | `import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/IllustratedMessage) | +| MediaGallery | The ui5-media-gallery component allows the user to browse through multimedia items. Currently, | `` | `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/MediaGallery) | +| NavigationLayout | The ui5-navigation-layout is a container component that can be used to | `` | `import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/NavigationLayout) | +| NotificationList | The ui5-notification-list web component represents Derived: page has no ES6 import example. | `` | `import "@ui5/webcomponents-fiori/dist/NotificationList.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/NotificationList) | +| Page | The ui5-page is a container component that holds one whole screen of an application. | `` | `import "@ui5/webcomponents-fiori/dist/Page.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/Page) | +| ProductSwitch | The ui5-product-switch is an SAP Fiori specific web component that is used in ui5-shellbar | `` | `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/ProductSwitch) | +| Search | The following entity is available under an experimental flag and its API and behavior are subject to change. | `` | `import "@ui5/webcomponents-fiori/dist/Search.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/Search) | +| ShellBar | The ui5-shellbar is meant to serve as an application header | `` | `import "@ui5/webcomponents-fiori/dist/ShellBar.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/ShellBar) | +| SideNavigation | The SideNavigation is used as a standard menu in applications. | `` | `import "@ui5/webcomponents-fiori/dist/SideNavigation.js"` | [Docs](https://ui5.github.io/webcomponents/components/fiori/SideNavigation) | +| Timeline | The ui5-timeline component shows entries (such as objects, events, or posts) in chronological order. Derived: page has no ES6 import example. | `` | `import "@ui5/webcomponents-fiori/dist/Timeline.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/Timeline) | +| UploadCollection | This component allows you to represent files before uploading them to a server, with the help of ui5-upload-collection-item. | `` | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/UploadCollection) | +| UserMenu | The ui5-user-menu is an SAP Fiori specific web component that is used in ui5-shellbar | `` | `import "@ui5/webcomponents-fiori/dist/UserMenu.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/UserMenu) | +| UserSettingsDialog | The ui5-user-settings-dialog is an SAP Fiori-specific web component used in the ui5-user-menu. | `` | `import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/UserSettingsDialog) | +| ViewSettingsDialog | The ui5-view-settings-dialog component helps the user to sort data within a list or a table. | `` | `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/ViewSettingsDialog) | +| Wizard | The ui5-wizard helps users to complete a complex task by dividing it into sections and guiding them through it. | `` | `import "@ui5/webcomponents-fiori/dist/Wizard.js";` | [Docs](https://ui5.github.io/webcomponents/components/fiori/Wizard) | + +## AI + +| Component | Brief description | HTML tag | ESM import | Source | +| --- | --- | --- | --- | --- | +| Button | The @ui5/webcomponents-ai package (including Button and ButtonState) is under active development and considered experimental. Component APIs are subject to change. | `` | `import "@ui5/webcomponents-ai/dist/Button.js";` | [Docs](https://ui5.github.io/webcomponents/components/ai/Button) | +| Input | The @ui5/webcomponents-ai package is under active development and considered experimental. Component APIs are subject to change. | `` | `import "@ui5/webcomponents-ai/dist/Input.js";` | [Docs](https://ui5.github.io/webcomponents/components/ai/Input) | +| PromptInput | The @ui5/webcomponents-ai package is under development and considered experimental - components' APIs are subject to change. | `` | `import "@ui5/webcomponents-ai/dist/PromptInput.js";` | [Docs](https://ui5.github.io/webcomponents/components/ai/PromptInput) | +| TextArea | The @ui5/webcomponents-ai package is under development and considered experimental - components' APIs are subject to change. | `` | `import "@ui5/webcomponents-ai/dist/TextArea.js";` | [Docs](https://ui5.github.io/webcomponents/components/ai/TextArea) | +