website·Indexed 29 days ago
https://ui5.github.io/webcomponentsAn enterprise-grade, framework-agnostic library implementing SAP Fiori design. This documentation provides technical specifications, quick start instructions, and details for components such as Avatar, Input, and Table elements, including their specific HTML tags like ui5-input and ui5-icon.
npm install @ui5/webcomponentsimport "@ui5/webcomponents/dist/Button.js";<ui5-button>Click Me</ui5-button>/dist/ path rather than the package root. Components are categorized into Main components, Fiori components, and Icons.// Main components
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Input.js";
// Fiori components
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
// Icons (always use dist path)
import "@ui5/webcomponents-icons/dist/add.js";For single or multiple selection, use the following components:
ui5-select: A standard drop-down list using ui5-option, ui5-option-custom, and ui5-option-group for organization.ui5-multi-combobox: A list box with a text field for multiple selections, using ui5-mcb-item, ui5-mcb-item-custom, and ui5-mcb-item-group.ui5-multi-input: Allows entering multiple values displayed as tokens.<ui5-select>
<ui5-option text="Option 1"></ui5-option>
</ui5-select>
<ui5-multi-combobox>
<ui5-mcb-item text="Item 1"></ui5-mcb-item>
</ui5-multi-combobox><!-- Main Dialog --> <ui5-user-settings-dialog> <!-- View displayed within a settings item --> <ui5-user-settings-view> <!-- Group for appearance settings --> <ui5-user-settings-appearance-view-group> <!-- Individual theme/appearance option --> <ui5-user-settings-appearance-view-item></ui5-user-settings-appearance-view-item> </ui5-user-settings-appearance-view-group> </ui5-user-settings-view> </ui5-user-settings-dialog>
<!-- Notification Settings --> <ui5-user-settings-notifications-view> <ui5-user-settings-notifications-view-group> <ui5-user-settings-notifications-view-item></ui5-user-settings-notifications-view-item> </ui5-user-settings-notifications-view-group> </ui5-user-settings-notifications-view>
For simple state or rating feedback:
ui5-switch: Changes between binary (on/off) states.ui5-radio-button: Selects a single option from a set.ui5-rating-indicator: Displays a specific number of icons to rate an item.<ui5-switch></ui5-switch>
<ui5-radio-button></ui5-radio-button>
<ui5-rating-indicator></ui5-rating-indicator>General purpose UI components include:
ui5-label: Labels for inputs, textareas, or selects.ui5-link: Hyperlinks for navigation.ui5-panel: A container with a header.ui5-message-strip: Embeds application-related messages.ui5-progress-indicator: Graphically shows the progress of a process.<ui5-label>Field Label</ui5-label>
<ui5-link href="...">Link Text</ui5-link>
<ui5-message-strip></ui5-message-strip>
<ui5-progress-indicator></ui5-progress-indicator>To display data in a hierarchy, use the following components:
ui5-tree: The main container for the tree structure.ui5-tree-item: Represents a node in the tree, rendered as a list item.ui5-tree-item-custom: A customizable node in the tree structure.UI5 provides several components for numeric data entry:
ui5-number-input: A numeric input field for entering/editing numbers.ui5-step-input: An input field with increment/decrement buttons.ui5-slider: A numerical range with a single handle.ui5-range-slider: A numerical interval with two handles to select a sub-range.<ui5-number-input></ui5-number-input>
<ui5-step-input></ui5-step-input>
<ui5-slider></ui5-slider>
<ui5-range-slider></ui5-range-slider>For basic data entry and display, use these components:
ui5-text: Displays general text in any content area.ui5-title: Displays titles within a page.ui5-textarea: Allows entry of multiple rows of text.ui5-time-picker: An input field with an associated clock for time selection.ui5-toggle-button: An enhanced version of the standard button for toggling states.ui5-toast: A non-disruptive popup for success or information messages.<ui5-table>
<ui5-table-column>Column 1</ui5-table-column>
<ui5-table-column>Column 2</ui5-table-column>
<ui5-table-group-row>Group Header</ui5-table-group-row>
<ui5-table-row>
<ui5-table-cell>Data 1</ui5-table-cell>
<ui5-table-cell>Data 2</ui5-table-cell>
</ui5-table-row>
</ui5-table>UI5 provides a suite of components to build complex tables. The base table is extended using the following specialized elements:
ui5-table-header-row: Defines the table headers.ui5-table-header-cell: Represents an individual column in the table.ui5-table-header-cell-action-ai: Adds a dedicated AI action to a table column.ui5-table-row: Represents a data row.ui5-table-group-row: Represents a group header row.ui5-table-row-action: Defines an action for table rows.ui5-table-row-action-navigation: Defines a navigation action for table rows.ui5-table-growing: Adds data loading/growing functionality.ui5-table-virtualizer: Virtualizes rows for performance (requires overflowMode set to 'Scroll').ui5-table-selection (key-based), ui5-table-selection-single (single selection), and ui5-table-selection-multi (multi-selection).The following Fiori components provide high-level application patterns:
ui5-dynamic-page: A full web page layout containing a ui5-dynamic-page-title, ui5-dynamic-page-header, a content area, and an optional floating footer.ui5-flexible-column-layout: Implements the list-detail-detail paradigm with up to three columns.ui5-dynamic-side-content: A layout component for additional side content.ui5-barcode-scanner-dialog: Provides barcode scanning using the MediaDevices.getUserMedia() API.ui5-filter-item and ui5-filter-item-option: Define filtering criteria and values for use within a ui5-view-settings-dialog.