@ui5/webcomponents-fiori 2.26.0-rc.1 → 2.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/DynamicPage.js +7 -0
- package/dist/DynamicPage.js.map +1 -1
- package/dist/custom-elements-internal.json +12 -12
- package/dist/custom-elements.json +12 -12
- package/dist/vscode.html-custom-data.json +76 -191
- package/dist/web-types.json +1 -1
- package/package.json +7 -7
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
+
"$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
|
|
2
3
|
"version": 1.1,
|
|
3
4
|
"tags": [
|
|
4
5
|
{
|
|
5
6
|
"name": "ui5-barcode-scanner-dialog",
|
|
6
|
-
"description": "### Overview\n\nThe `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\nOpening the dialog launches the device camera and scans for known barcode formats.\n\nA `scanSuccess` event fires whenever a barcode is identified\nand a `scanError` event fires when the scan failed (for example, due to missing permisions).\n\nInternally, the component uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.\n
|
|
7
|
+
"description": "### Overview\n\nThe `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\nOpening the dialog launches the device camera and scans for known barcode formats.\n\nA `scanSuccess` event fires whenever a barcode is identified\nand a `scanError` event fires when the scan failed (for example, due to missing permisions).\n\nInternally, the component uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.\n---\n\n\n### **Events:**\n - **close** - Fired when the user closes the component.\n- **scan-error** - Fires when the scan fails with error.\n- **scan-success** - Fires when the scan is completed successfully.\n\n### **Slots:**\n - **footer** - Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.",
|
|
7
8
|
"attributes": [
|
|
8
9
|
{
|
|
9
10
|
"name": "open",
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
},
|
|
16
17
|
{
|
|
17
18
|
"name": "ui5-dynamic-page",
|
|
18
|
-
"description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe component consist of several components:\n\n- `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n- `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n- `Content area` - a generic container, which can have a single UI5 layout.\n- `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n\n### Usage\n\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll through the content.\n\n## Notes:\n\n- Snapping of the `DynamicPageTitle` is not supported in the following case:\n - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n\n### Responsive Behavior\n\nDynamic page web component implements the responsive paddings design.\n\n### Keyboard Handling\n\n\n### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\nIf focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\nIf focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n\n### Fast Navigation\n- This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.\nIn order to use this functionality, you need to import the following module:\n\n- `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n
|
|
19
|
+
"description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe component consist of several components:\n\n- `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n- `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n- `Content area` - a generic container, which can have a single UI5 layout.\n- `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n\n### Usage\n\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll through the content.\n\n## Notes:\n\n- Snapping of the `DynamicPageTitle` is not supported in the following case:\n - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n\n### Responsive Behavior\n\nDynamic page web component implements the responsive paddings design.\n\n### Keyboard Handling\n\n\n### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\nIf focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\nIf focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n\n### Fast Navigation\n- This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.\nIn order to use this functionality, you need to import the following module:\n\n- `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n---\n\n\n### **Events:**\n - **pin-button-toggle** - Fired when the pin header button is toggled.\n- **title-toggle** - Fired when the expand/collapse area of the title is toggled.\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page.\n- **footerArea** - Defines the footer HTML Element.\n- **headerArea** - Defines the header HTML Element.\n- **titleArea** - Defines the title HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **fit-content** - Used to style the fit content container of the component.\n- **footer** - Used to style the footer of the component",
|
|
19
20
|
"attributes": [
|
|
20
21
|
{
|
|
21
22
|
"name": "accessibility-attributes",
|
|
@@ -30,7 +31,7 @@
|
|
|
30
31
|
{
|
|
31
32
|
"name": "header-snapped",
|
|
32
33
|
"description": "Defines if the header is snapped.",
|
|
33
|
-
"values": [
|
|
34
|
+
"values": []
|
|
34
35
|
},
|
|
35
36
|
{
|
|
36
37
|
"name": "hide-pin-button",
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
},
|
|
48
49
|
{
|
|
49
50
|
"name": "ui5-dynamic-page-header",
|
|
50
|
-
"description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.\n
|
|
51
|
+
"description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page Header.",
|
|
51
52
|
"attributes": [
|
|
52
53
|
{
|
|
53
54
|
"name": "accessible-name",
|
|
@@ -59,19 +60,19 @@
|
|
|
59
60
|
},
|
|
60
61
|
{
|
|
61
62
|
"name": "ui5-dynamic-page-header-actions",
|
|
62
|
-
"description": "### Overview\n\nThe `DynamicPageHeaderActions` component is part of the `DynamicPage`\nfamily and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n\nThe \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\nThe expand/collapse action is used to switch between the two states of `DynamicPageHeader`.\n
|
|
63
|
+
"description": "### Overview\n\nThe `DynamicPageHeaderActions` component is part of the `DynamicPage`\nfamily and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n\nThe \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\nThe expand/collapse action is used to switch between the two states of `DynamicPageHeader`.\n---\n",
|
|
63
64
|
"attributes": [],
|
|
64
65
|
"references": []
|
|
65
66
|
},
|
|
66
67
|
{
|
|
67
68
|
"name": "ui5-dynamic-page-title",
|
|
68
|
-
"description": "### Overview\n\nTitle of the `DynamicPage`.\n\nThe `DynamicPageTitle` component is part of the `DynamicPage`\nfamily and is used to serve as title of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageTitle` can hold any component and displays the most important\ninformation regarding the object that will always remain visible while scrolling.\n\n**Note:** The `actions` slot accepts any UI5 web component, but it's\nrecommended to use `ui5-toolbar`.\n\nThe user can switch between the expanded/collapsed states of the\n`DynamicPage` by clicking on the `DynamicPageTitle`\nor by using the expand/collapse visual indicators, positioned at the bottom of the\n`DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageTitle` depends on the behavior of the\ncontent that is displayed.\n
|
|
69
|
+
"description": "### Overview\n\nTitle of the `DynamicPage`.\n\nThe `DynamicPageTitle` component is part of the `DynamicPage`\nfamily and is used to serve as title of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageTitle` can hold any component and displays the most important\ninformation regarding the object that will always remain visible while scrolling.\n\n**Note:** The `actions` slot accepts any UI5 web component, but it's\nrecommended to use `ui5-toolbar`.\n\nThe user can switch between the expanded/collapsed states of the\n`DynamicPage` by clicking on the `DynamicPageTitle`\nor by using the expand/collapse visual indicators, positioned at the bottom of the\n`DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageTitle` depends on the behavior of the\ncontent that is displayed.\n---\n\n\n### **Slots:**\n - **actionsBar** - Defines the bar with actions in the Dynamic page title.\n- **breadcrumbs** - Defines the content of the breadcrumbs inside Dynamic Page Title.\n- **default** - Defines the content of the Dynamic page title.\n- **heading** - Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`\n- **navigationBar** - Defines the bar with navigation actions in the Dynamic page title.\n- **snappedHeading** - Defines the heading that is shown only when the header is snapped.\n- **snappedSubheading** - Defines the content of the title that is shown only when the header is snapped.\n- **snappedTitleOnMobile** - Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component.\n- **subheading** - Defines the content of the title that is shown only when the header is not snapped.",
|
|
69
70
|
"attributes": [],
|
|
70
71
|
"references": []
|
|
71
72
|
},
|
|
72
73
|
{
|
|
73
74
|
"name": "ui5-dynamic-side-content",
|
|
74
|
-
"description": "### Overview\n\nThe DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content\nto be displayed in a way that flexibly adapts to different screen sizes. The side\ncontent appears in a container next to or directly below the main content\n(it doesn't overlay). When the side content is triggered, the main content becomes\nnarrower (if appearing side-by-side). The side content contains a separate scrollbar\nwhen appearing next to the main content.\n\n### Usage\n\n*When to use?*\n\nUse this component if you want to display relevant information that is not critical\nfor users to complete a task. Users should have access to all the key functions and\ncritical information in the app even if they do not see the side content. This is\nimportant because on smaller screen sizes it may be difficult to display the side\ncontent in a way that is easily accessible for the user.\n\n*When not to use?*\n\nDon't use it if you want to display navigation or critical information that prevents\nusers from completing a task when they have no access to the side content.\n\n### Responsive Behavior\n\nScreen width \\> 1440px\n\n- Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\neach).\n- If the application defines a trigger, the side content can be hidden.\n\nScreen width \\<\\= 1440px and \\> 1024px\n\n- Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n320px each). If the side content width falls below 320 px, it automatically slides\nunder the main content, unless the app development team specifies that it should\ndisappear.\n\nScreen width \\<\\= 1024px and \\> 720px\n\n- The side content ratio is fixed to 340px, and the main content takes the rest\nof the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\nand screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n\nScreen width \\<\\= 720px (for example on a mobile device)\n\n- In this case, the side content automatically disappears from the screen (unless\nspecified to stay under the content by setting of `sideContentVisibility`\nproperty to `AlwaysShow`) and can be triggered from a pre-set trigger\n(specified within the app). When the side content is triggered, it replaces the main\ncontent. We recommend that you always place the trigger for the side content in the\nsame location, such as in the app footer.\n\nA special case allows switching the comparison mode between the main and side content.\nIn this case, the screen is split into 50:50 percent for main vs. side content. The\nresponsive behavior of the equal split is the same as in the standard view - the\nside content disappears on screen widths of less than 720 px and can only be\nviewed by triggering it.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`\n
|
|
75
|
+
"description": "### Overview\n\nThe DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content\nto be displayed in a way that flexibly adapts to different screen sizes. The side\ncontent appears in a container next to or directly below the main content\n(it doesn't overlay). When the side content is triggered, the main content becomes\nnarrower (if appearing side-by-side). The side content contains a separate scrollbar\nwhen appearing next to the main content.\n\n### Usage\n\n*When to use?*\n\nUse this component if you want to display relevant information that is not critical\nfor users to complete a task. Users should have access to all the key functions and\ncritical information in the app even if they do not see the side content. This is\nimportant because on smaller screen sizes it may be difficult to display the side\ncontent in a way that is easily accessible for the user.\n\n*When not to use?*\n\nDon't use it if you want to display navigation or critical information that prevents\nusers from completing a task when they have no access to the side content.\n\n### Responsive Behavior\n\nScreen width \\> 1440px\n\n- Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\neach).\n- If the application defines a trigger, the side content can be hidden.\n\nScreen width \\<\\= 1440px and \\> 1024px\n\n- Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n320px each). If the side content width falls below 320 px, it automatically slides\nunder the main content, unless the app development team specifies that it should\ndisappear.\n\nScreen width \\<\\= 1024px and \\> 720px\n\n- The side content ratio is fixed to 340px, and the main content takes the rest\nof the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\nand screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n\nScreen width \\<\\= 720px (for example on a mobile device)\n\n- In this case, the side content automatically disappears from the screen (unless\nspecified to stay under the content by setting of `sideContentVisibility`\nproperty to `AlwaysShow`) and can be triggered from a pre-set trigger\n(specified within the app). When the side content is triggered, it replaces the main\ncontent. We recommend that you always place the trigger for the side content in the\nsame location, such as in the app footer.\n\nA special case allows switching the comparison mode between the main and side content.\nIn this case, the screen is split into 50:50 percent for main vs. side content. The\nresponsive behavior of the equal split is the same as in the standard view - the\nside content disappears on screen widths of less than 720 px and can only be\nviewed by triggering it.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`\n---\n\n\n### **Events:**\n - **layout-change** - Fires when the current breakpoint has been changed.\n\n### **Methods:**\n - **toggleContents(): _void_** - Toggles visibility of main and side contents on S screen size (mobile device).\n\n### **Slots:**\n - **default** - Defines the main content.\n- **sideContent** - Defines the side content.",
|
|
75
76
|
"attributes": [
|
|
76
77
|
{
|
|
77
78
|
"name": "accessibility-attributes",
|
|
@@ -124,7 +125,7 @@
|
|
|
124
125
|
},
|
|
125
126
|
{
|
|
126
127
|
"name": "ui5-filter-item",
|
|
127
|
-
"description": "### Overview\n\nThe `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.\nIt represents a single filter category that contains multiple filter options that users can select.\n\n### Usage\n\nThe `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n
|
|
128
|
+
"description": "### Overview\n\nThe `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.\nIt represents a single filter category that contains multiple filter options that users can select.\n\n### Usage\n\nThe `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n---\n\n\n### **Slots:**\n - **values** - Defines the filter options available for this filter category.",
|
|
128
129
|
"attributes": [
|
|
129
130
|
{
|
|
130
131
|
"name": "additional-text",
|
|
@@ -141,7 +142,7 @@
|
|
|
141
142
|
},
|
|
142
143
|
{
|
|
143
144
|
"name": "ui5-filter-item-option",
|
|
144
|
-
"description": "### Overview\n\nThe `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`.\nIt represents a single selectable option that users can choose to filter data.\n\n### Usage\n\nThe `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context\nof `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItemOption.js\";`\n
|
|
145
|
+
"description": "### Overview\n\nThe `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`.\nIt represents a single selectable option that users can choose to filter data.\n\n### Usage\n\nThe `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context\nof `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItemOption.js\";`\n---\n",
|
|
145
146
|
"attributes": [
|
|
146
147
|
{
|
|
147
148
|
"name": "selected",
|
|
@@ -158,7 +159,7 @@
|
|
|
158
159
|
},
|
|
159
160
|
{
|
|
160
161
|
"name": "ui5-flexible-column-layout",
|
|
161
|
-
"description": "### Overview\n\nThe `FlexibleColumnLayout` implements the list-detail-detail paradigm by displaying up to three pages in separate columns.\nThere are several possible layouts that can be changed either with the component API, or by dragging the column separators.\n\n### Usage\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.).\nThe Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n### Responsive Behavior\n\nThe `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` property and the window size.\nThe component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,\nand 3 columns for sizes bigger than 1023px.\n\n**Note:** When the component displays more than one column, the minimal width of each column is 248px. Consequently, when the user drags a column separator to resize the columns, the minimal allowed width of any resized column is 248px.\n\n### Keyboard Handling\n\n#### Basic Navigation\n\nWhen a column separator is focused, the following keyboard\nshortcuts allow the user to resize the columns and change the layout:\n\n- [Shift] + [Left] or [Shift] + [Right] - Moves the separator to the left or right, which resizes the columns accordingly.\n- [Left] or [Right] - Moves the separator to the left or right with a bigger step, which resizes the columns accordingly.\n- [Home] - Moves the separator to the start position.\n- [End] - Moves the separator to the end position.\n- This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";`\n
|
|
162
|
+
"description": "### Overview\n\nThe `FlexibleColumnLayout` implements the list-detail-detail paradigm by displaying up to three pages in separate columns.\nThere are several possible layouts that can be changed either with the component API, or by dragging the column separators.\n\n### Usage\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.).\nThe Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n### Responsive Behavior\n\nThe `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` property and the window size.\nThe component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,\nand 3 columns for sizes bigger than 1023px.\n\n**Note:** When the component displays more than one column, the minimal width of each column is 248px. Consequently, when the user drags a column separator to resize the columns, the minimal allowed width of any resized column is 248px.\n\n### Keyboard Handling\n\n#### Basic Navigation\n\nWhen a column separator is focused, the following keyboard\nshortcuts allow the user to resize the columns and change the layout:\n\n- [Shift] + [Left] or [Shift] + [Right] - Moves the separator to the left or right, which resizes the columns accordingly.\n- [Left] or [Right] - Moves the separator to the left or right with a bigger step, which resizes the columns accordingly.\n- [Home] - Moves the separator to the start position.\n- [End] - Moves the separator to the end position.\n- This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";`\n---\n\n\n### **Events:**\n - **layout-change** - Fired when the layout changes via user interaction by dragging the separators\nor by changing the component size due to resizing.\n- **layout-configuration-change** - Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.\n\n**Note:** The `layout-configuration-change` event is in an experimental state and is a subject to change.\n\n### **Slots:**\n - **endColumn** - Defines the content in the end column.\n- **midColumn** - Defines the content in the middle column.\n- **startColumn** - Defines the content in the start column.",
|
|
162
163
|
"attributes": [
|
|
163
164
|
{
|
|
164
165
|
"name": "accessibility-attributes",
|
|
@@ -168,7 +169,7 @@
|
|
|
168
169
|
{
|
|
169
170
|
"name": "column-layout",
|
|
170
171
|
"description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.",
|
|
171
|
-
"values": [
|
|
172
|
+
"values": []
|
|
172
173
|
},
|
|
173
174
|
{
|
|
174
175
|
"name": "disable-resizing",
|
|
@@ -178,7 +179,7 @@
|
|
|
178
179
|
{
|
|
179
180
|
"name": "end-column-visible",
|
|
180
181
|
"description": "Returns if the `end` column is visible.",
|
|
181
|
-
"values": [
|
|
182
|
+
"values": []
|
|
182
183
|
},
|
|
183
184
|
{
|
|
184
185
|
"name": "layout",
|
|
@@ -205,24 +206,24 @@
|
|
|
205
206
|
{
|
|
206
207
|
"name": "mid-column-visible",
|
|
207
208
|
"description": "Returns if the `middle` column is visible.",
|
|
208
|
-
"values": [
|
|
209
|
+
"values": []
|
|
209
210
|
},
|
|
210
211
|
{
|
|
211
212
|
"name": "start-column-visible",
|
|
212
213
|
"description": "Returns if the `start` column is visible.",
|
|
213
|
-
"values": [
|
|
214
|
+
"values": []
|
|
214
215
|
},
|
|
215
216
|
{
|
|
216
217
|
"name": "visible-columns",
|
|
217
218
|
"description": "Returns the number of currently visible columns.",
|
|
218
|
-
"values": [
|
|
219
|
+
"values": []
|
|
219
220
|
}
|
|
220
221
|
],
|
|
221
222
|
"references": []
|
|
222
223
|
},
|
|
223
224
|
{
|
|
224
225
|
"name": "ui5-group-item",
|
|
225
|
-
"description": "### Overview\n\nThe `ui5-group-item` component defines the grouping criteria for data in `ui5-view-settings-dialog`.\nIt represents a single group option that users can select to organize data into logical groups.\n\n### Usage\n\nThe `ui5-group-item` is used within the `ui5-view-settings-dialog` to provide grouping options.\nEach group item represents a column or field by which data can be grouped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n
|
|
226
|
+
"description": "### Overview\n\nThe `ui5-group-item` component defines the grouping criteria for data in `ui5-view-settings-dialog`.\nIt represents a single group option that users can select to organize data into logical groups.\n\n### Usage\n\nThe `ui5-group-item` is used within the `ui5-view-settings-dialog` to provide grouping options.\nEach group item represents a column or field by which data can be grouped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n---\n",
|
|
226
227
|
"attributes": [
|
|
227
228
|
{
|
|
228
229
|
"name": "selected",
|
|
@@ -239,7 +240,7 @@
|
|
|
239
240
|
},
|
|
240
241
|
{
|
|
241
242
|
"name": "ui5-hero-banner",
|
|
242
|
-
"description": "### Overview\n\nThe `ui5-hero-banner` is a flexible, full-width banner designed for placement at the top of a page.\nIt provides a personalized greeting and quick access to key information or actions.\n\n### Structure\n\nThe HeroBanner consists of the following building blocks:\n\n- **Banner Canvas** - the visual base with a background color, optional background image and shadow.\n- **Overline** (optional) - contextual text at the top, e.g. the current date or a status message.\n- **Header** (optional) - the main greeting header below the overline, e.g. \"Hello, John\".\n- **Free Slots** (optional) - customizable content areas that can contain KPI cards, search components, text, buttons, etc.\n\nThe banner is not sticky — it scrolls away with the page content when the user scrolls down.\n\n### Usage\n\nPlace the `ui5-hero-banner` at the top of a page to welcome the user and surface relevant\ninformation or shortcuts at a glance.\n\nThe hero banner itself is non-interactive. However, interactive elements such as buttons, cards,\nor search fields can be placed inside the free content slots and will follow their own\ninteractive states.\n\n### Responsive Behavior\n\nThe hero banner adapts to different screen sizes:\n- On smaller screens, split layouts (Equal, FirstWider) collapse to a single stacked column.\n- The heading text wraps to multiple lines as needed.\n- Buttons in the headerAction slot will wrap.\n- On screens ≤1024px, the header text is wrapped to a maximum of 3 lines.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/HeroBanner.js\";`\n
|
|
243
|
+
"description": "### Overview\n\nThe `ui5-hero-banner` is a flexible, full-width banner designed for placement at the top of a page.\nIt provides a personalized greeting and quick access to key information or actions.\n\n### Structure\n\nThe HeroBanner consists of the following building blocks:\n\n- **Banner Canvas** - the visual base with a background color, optional background image and shadow.\n- **Overline** (optional) - contextual text at the top, e.g. the current date or a status message.\n- **Header** (optional) - the main greeting header below the overline, e.g. \"Hello, John\".\n- **Free Slots** (optional) - customizable content areas that can contain KPI cards, search components, text, buttons, etc.\n\nThe banner is not sticky — it scrolls away with the page content when the user scrolls down.\n\n### Usage\n\nPlace the `ui5-hero-banner` at the top of a page to welcome the user and surface relevant\ninformation or shortcuts at a glance.\n\nThe hero banner itself is non-interactive. However, interactive elements such as buttons, cards,\nor search fields can be placed inside the free content slots and will follow their own\ninteractive states.\n\n### Responsive Behavior\n\nThe hero banner adapts to different screen sizes:\n- On smaller screens, split layouts (Equal, FirstWider) collapse to a single stacked column.\n- The heading text wraps to multiple lines as needed.\n- Buttons in the headerAction slot will wrap.\n- On screens ≤1024px, the header text is wrapped to a maximum of 3 lines.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/HeroBanner.js\";`\n---\n\n\n### **Slots:**\n - **actions** - Defines action buttons displayed to the right of the header area.\nTypically used to display actions buttons in the top right corner.\n\nCan contain buttons, links, or other interactive elements that provide\nquick access to relevant actions directly from the hero banner header.\n- **default** - Defines the first (default) free content block of the hero banner.\n\nThis is the default slot — content placed directly inside `<ui5-hero-banner>`\nwithout a slot attribute lands here.\nCan contain KPI cards, search input fields, text, buttons, and more.\n- **endContent** - Defines the second free content block of the hero banner.\n\nUsed alongside `startContent` when `columnsRatio` is set (`Equal`, `FirstWider`).\nCan contain cards, buttons, and other interactive elements.\n\n### **CSS Parts:**\n - **canvas** - Used to style the banner canvas container\n- **content** - Used to style the content area of the banner\n- **endContent** - Used to style the end content block\n- **header** - Used to style the header area (salutation, date, header actions)\n- **startContent** - Used to style the start (default) content block",
|
|
243
244
|
"attributes": [
|
|
244
245
|
{
|
|
245
246
|
"name": "actions-placement",
|
|
@@ -271,7 +272,7 @@
|
|
|
271
272
|
},
|
|
272
273
|
{
|
|
273
274
|
"name": "ui5-illustrated-message",
|
|
274
|
-
"description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`\n
|
|
275
|
+
"description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.\n- **subtitle** - Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.\n- **title** - Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.\n\n### **CSS Parts:**\n - **subtitle** - Used to style the subtitle wrapper of the `ui5-illustrated-message`",
|
|
275
276
|
"attributes": [
|
|
276
277
|
{
|
|
277
278
|
"name": "accessible-name-ref",
|
|
@@ -319,7 +320,7 @@
|
|
|
319
320
|
},
|
|
320
321
|
{
|
|
321
322
|
"name": "ui5-media-gallery",
|
|
322
|
-
"description": "### Overview\n\nThe `ui5-media-gallery` component allows the user to browse through multimedia items. Currently,\nthe supported items are images and videos. The items should be defined using the `ui5-media-gallery-item`\ncomponent.\n\nThe items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item\nis displayed in larger size.\n\nThe component is responsive by default and adjusts the position of the menu with respect to viewport size,\nbut the application is able to further customize the layout via the provided API.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\n\nWhen the thumbnails menu is focused the following keyboard\nshortcuts allow the user to navigate through the thumbnail items:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n- [Space], [Enter] - Selects an item\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGallery.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";`\n
|
|
323
|
+
"description": "### Overview\n\nThe `ui5-media-gallery` component allows the user to browse through multimedia items. Currently,\nthe supported items are images and videos. The items should be defined using the `ui5-media-gallery-item`\ncomponent.\n\nThe items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item\nis displayed in larger size.\n\nThe component is responsive by default and adjusts the position of the menu with respect to viewport size,\nbut the application is able to further customize the layout via the provided API.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\n\nWhen the thumbnails menu is focused the following keyboard\nshortcuts allow the user to navigate through the thumbnail items:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n- [Space], [Enter] - Selects an item\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGallery.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";`\n---\n\n\n### **Events:**\n - **display-area-click** - Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.\n- **overflow-click** - Fired when the thumbnails overflow button is clicked.\n- **selection-change** - Fired when selection is changed by user interaction.\n\n### **Slots:**\n - **default** - Defines the component items.\n\n**Note:** Only one selected item is allowed.\n\n**Note:** Use the `ui5-media-gallery-item` component to define the desired items.",
|
|
323
324
|
"attributes": [
|
|
324
325
|
{
|
|
325
326
|
"name": "interactive-display-area",
|
|
@@ -355,7 +356,7 @@
|
|
|
355
356
|
},
|
|
356
357
|
{
|
|
357
358
|
"name": "ui5-media-gallery-item",
|
|
358
|
-
"description": "### Overview\nThe `ui5-media-gallery-item` web component represents the items displayed in the\n`ui5-media-gallery` web component.\n\n**Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";` (comes with `ui5-media-gallery`)\n
|
|
359
|
+
"description": "### Overview\nThe `ui5-media-gallery-item` web component represents the items displayed in the\n`ui5-media-gallery` web component.\n\n**Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";` (comes with `ui5-media-gallery`)\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.\n- **thumbnail** - Defines the content of the thumbnail.",
|
|
359
360
|
"attributes": [
|
|
360
361
|
{
|
|
361
362
|
"name": "disabled",
|
|
@@ -377,7 +378,7 @@
|
|
|
377
378
|
},
|
|
378
379
|
{
|
|
379
380
|
"name": "ui5-navigation-layout",
|
|
380
|
-
"description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by\ndefault and can be displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`\n
|
|
381
|
+
"description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by\ndefault and can be displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`\n---\n\n\n### **Methods:**\n - **isSideCollapsed(): _boolean_** - Gets whether the side navigation is collapsed.\n\n### **Slots:**\n - **default** - Defines the content.\n- **header** - Defines the header.\n- **sideContent** - Defines the side content.",
|
|
381
382
|
"attributes": [
|
|
382
383
|
{
|
|
383
384
|
"name": "mode",
|
|
@@ -393,13 +394,13 @@
|
|
|
393
394
|
},
|
|
394
395
|
{
|
|
395
396
|
"name": "ui5-navigation-menu",
|
|
396
|
-
"description": "### Overview\n\n`ui5-navigation-menu` component represents a hierarchical menu structure, inherits all the functionality of `ui5-menu`.\n\n### Usage\n\n`ui5-navigation-menu` contains `ui5-navigation-menu-item` components.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenu.js\";`\n
|
|
397
|
+
"description": "### Overview\n\n`ui5-navigation-menu` component represents a hierarchical menu structure, inherits all the functionality of `ui5-menu`.\n\n### Usage\n\n`ui5-navigation-menu` contains `ui5-navigation-menu-item` components.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenu.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-navigation-menu-item` for the intended design.",
|
|
397
398
|
"attributes": [],
|
|
398
399
|
"references": []
|
|
399
400
|
},
|
|
400
401
|
{
|
|
401
402
|
"name": "ui5-navigation-menu-item",
|
|
402
|
-
"description": "### Overview\n\n`ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### Usage\n\n`ui5-navigation-menu-item` represents a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,\nand each `ui5-navigation-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenuItem.js\";`\n
|
|
403
|
+
"description": "### Overview\n\n`ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### Usage\n\n`ui5-navigation-menu-item` represents a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,\nand each `ui5-navigation-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenuItem.js\";`\n---\n",
|
|
403
404
|
"attributes": [
|
|
404
405
|
{
|
|
405
406
|
"name": "href",
|
|
@@ -416,7 +417,7 @@
|
|
|
416
417
|
},
|
|
417
418
|
{
|
|
418
419
|
"name": "ui5-notification-list",
|
|
419
|
-
"description": "### Overview\nThe `ui5-notification-list` web component represents\na container for `ui5-li-notification-group` and `ui5-li-notification`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-notification-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Left] - Navigates up the items\n- [Down] or [Right] - Navigates down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationList.js\";``\n
|
|
420
|
+
"description": "### Overview\nThe `ui5-notification-list` web component represents\na container for `ui5-li-notification-group` and `ui5-li-notification`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-notification-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Left] - Navigates up the items\n- [Down] or [Right] - Navigates down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationList.js\";``\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n- **item-close** - Fired when the `Close` button of any item is clicked.\n- **item-toggle** - Fired when an item is toggled.\n\n### **Slots:**\n - **default** - Defines the items of the component.",
|
|
420
421
|
"attributes": [
|
|
421
422
|
{
|
|
422
423
|
"name": "no-data-text",
|
|
@@ -428,7 +429,7 @@
|
|
|
428
429
|
},
|
|
429
430
|
{
|
|
430
431
|
"name": "ui5-li-notification-group",
|
|
431
|
-
"description": "### Overview\nThe `ui5-li-notification-group` is a special type of list item,\nthat unlike others can group items within self, usually `ui5-li-notification` items.\n\nThe component consists of:\n\n- `Toggle` button to expand and collapse the group\n- `TitleText` to entitle the group\n- Items of the group\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\nThe `ui5-li-notification-group` provides advanced keyboard handling.\nThis component provides fast navigation when the header is focused using the following keyboard shortcuts:\n\n- [Space] - toggles expand / collapse of the group\n- [Plus] - expands the group\n- [Minus] - collapses the group\n- [Right] - expands the group\n- [Left] - collapses the group\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`\n
|
|
432
|
+
"description": "### Overview\nThe `ui5-li-notification-group` is a special type of list item,\nthat unlike others can group items within self, usually `ui5-li-notification` items.\n\nThe component consists of:\n\n- `Toggle` button to expand and collapse the group\n- `TitleText` to entitle the group\n- Items of the group\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\nThe `ui5-li-notification-group` provides advanced keyboard handling.\nThis component provides fast navigation when the header is focused using the following keyboard shortcuts:\n\n- [Space] - toggles expand / collapse of the group\n- [Plus] - expands the group\n- [Minus] - collapses the group\n- [Right] - expands the group\n- [Left] - collapses the group\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`\n---\n\n\n### **Events:**\n - **load-more** - Fired when additional items are requested.\n- **toggle** - Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.\n\n### **Slots:**\n - **default** - Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items.",
|
|
432
433
|
"attributes": [
|
|
433
434
|
{
|
|
434
435
|
"name": "collapsed",
|
|
@@ -465,19 +466,19 @@
|
|
|
465
466
|
},
|
|
466
467
|
{
|
|
467
468
|
"name": "ui5-notification-group-list",
|
|
468
|
-
"description": "Internal `ui5-li-notification-group-list` component,\nthat is used to support keyboard navigation of the notification group internal list.\n
|
|
469
|
+
"description": "Internal `ui5-li-notification-group-list` component,\nthat is used to support keyboard navigation of the notification group internal list.\n---\n",
|
|
469
470
|
"attributes": [],
|
|
470
471
|
"references": []
|
|
471
472
|
},
|
|
472
473
|
{
|
|
473
474
|
"name": "ui5-notification-list-internal",
|
|
474
|
-
"description": "Internal `ui5-li-notification-list-list` component,\nthat is used to support keyboard navigation of the notification list internal list.\n
|
|
475
|
+
"description": "Internal `ui5-li-notification-list-list` component,\nthat is used to support keyboard navigation of the notification list internal list.\n---\n",
|
|
475
476
|
"attributes": [],
|
|
476
477
|
"references": []
|
|
477
478
|
},
|
|
478
479
|
{
|
|
479
480
|
"name": "ui5-li-notification",
|
|
480
|
-
"description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n
|
|
481
|
+
"description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n- **close** - Fired when the `Close` button is pressed.\n\n### **Slots:**\n - **avatar** - Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.\n- **default** - Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **footnotes** - Defines the elements, displayed in the footer of the of the component.\n- **menu** - Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.\n\n### **CSS Parts:**\n - **title-text** - Used to style the titleText of the notification list item",
|
|
481
482
|
"attributes": [
|
|
482
483
|
{
|
|
483
484
|
"name": "importance",
|
|
@@ -528,36 +529,9 @@
|
|
|
528
529
|
],
|
|
529
530
|
"references": []
|
|
530
531
|
},
|
|
531
|
-
{
|
|
532
|
-
"name": "notification-list-item-base",
|
|
533
|
-
"description": "The base class of the `NotificationListItem` and `NotificationListGroupItem`.\n\n\n---\n\n\n",
|
|
534
|
-
"attributes": [
|
|
535
|
-
{
|
|
536
|
-
"name": "loading",
|
|
537
|
-
"description": "Defines if a busy indicator would be displayed over the item.",
|
|
538
|
-
"values": []
|
|
539
|
-
},
|
|
540
|
-
{
|
|
541
|
-
"name": "loading-delay",
|
|
542
|
-
"description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
|
|
543
|
-
"values": []
|
|
544
|
-
},
|
|
545
|
-
{
|
|
546
|
-
"name": "read",
|
|
547
|
-
"description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
|
|
548
|
-
"values": []
|
|
549
|
-
},
|
|
550
|
-
{
|
|
551
|
-
"name": "title-text",
|
|
552
|
-
"description": "Defines the `titleText` of the item.",
|
|
553
|
-
"values": []
|
|
554
|
-
}
|
|
555
|
-
],
|
|
556
|
-
"references": []
|
|
557
|
-
},
|
|
558
532
|
{
|
|
559
533
|
"name": "ui5-page",
|
|
560
|
-
"description": "### Overview\n\nThe `ui5-page` is a container component that holds one whole screen of an application.\nThe page has three distinct areas that can hold content - a header, content area and a footer.\n### Structure\n#### Header\nThe top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n#### Content\nThe content occupies the main part of the page. Only the content area is scrollable by default.\nThis can be prevented by setting `noScrolling` to `true`.\n#### Footer\nThe footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.\n\n**Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure\nthat there is enough space for the `ui5-page` to be rendered.\n**Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Page.js\";`\n
|
|
534
|
+
"description": "### Overview\n\nThe `ui5-page` is a container component that holds one whole screen of an application.\nThe page has three distinct areas that can hold content - a header, content area and a footer.\n### Structure\n#### Header\nThe top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n#### Content\nThe content occupies the main part of the page. Only the content area is scrollable by default.\nThis can be prevented by setting `noScrolling` to `true`.\n#### Footer\nThe footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.\n\n**Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure\nthat there is enough space for the `ui5-page` to be rendered.\n**Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Page.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the content HTML Element.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content section of the component",
|
|
561
535
|
"attributes": [
|
|
562
536
|
{
|
|
563
537
|
"name": "background-design",
|
|
@@ -588,13 +562,13 @@
|
|
|
588
562
|
},
|
|
589
563
|
{
|
|
590
564
|
"name": "ui5-product-switch",
|
|
591
|
-
"description": "### Overview\n\nThe `ui5-product-switch` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily switch between products.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Tab] - Move focus to the next interactive element after the `ui5-product-switch`\n- [Up] or [Down] - Navigates up and down the items\n- [Left] or [Right] - Navigates left and right the items\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";` (for `ui5-product-switch-item`)\n
|
|
565
|
+
"description": "### Overview\n\nThe `ui5-product-switch` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily switch between products.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Tab] - Move focus to the next interactive element after the `ui5-product-switch`\n- [Up] or [Down] - Navigates up and down the items\n- [Left] or [Right] - Navigates left and right the items\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";` (for `ui5-product-switch-item`)\n---\n\n\n### **Slots:**\n - **default** - Defines the items of the `ui5-product-switch`.",
|
|
592
566
|
"attributes": [],
|
|
593
567
|
"references": []
|
|
594
568
|
},
|
|
595
569
|
{
|
|
596
570
|
"name": "ui5-product-switch-item",
|
|
597
|
-
"description": "### Overview\nThe `ui5-product-switch-item` web component represents the items displayed in the\n`ui5-product-switch` web component.\n\n**Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";`\n
|
|
571
|
+
"description": "### Overview\nThe `ui5-product-switch-item` web component represents the items displayed in the\n`ui5-product-switch` web component.\n\n**Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the `ui5-product-switch-item` is activated either with a\nclick/tap or by using the Enter or Space key.\n\n### **Slots:**\n - **image** - Defines an image to be displayed instead of the standard icon.\n\n**Note:** The image slot takes precedence over the icon property.\n**Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment.",
|
|
598
572
|
"attributes": [
|
|
599
573
|
{
|
|
600
574
|
"name": "icon",
|
|
@@ -626,7 +600,7 @@
|
|
|
626
600
|
},
|
|
627
601
|
{
|
|
628
602
|
"name": "ui5-search",
|
|
629
|
-
"description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`\n
|
|
603
|
+
"description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the popup is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n- **open** - Fired when the popup is opened.\n- **scope-change** - Fired when the scope has changed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.\n\n### **Slots:**\n - **action** - Defines the popup footer action button.\n- **default** - Defines the Search suggestion items.\n- **filterButton** - Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.\n- **illustration** - Defines the illustrated message to be shown in the popup.\n- **messageArea** - Defines the illustrated message to be shown in the popup.\n- **scopes** - Defines the component scope options.\n\n### **CSS Parts:**\n - **popover** - Used to style the suggestions popup",
|
|
630
604
|
"attributes": [
|
|
631
605
|
{
|
|
632
606
|
"name": "accessible-description",
|
|
@@ -683,7 +657,7 @@
|
|
|
683
657
|
},
|
|
684
658
|
{
|
|
685
659
|
"name": "ui5-search-field",
|
|
686
|
-
"description": "### Overview\n\nA `ui5-search-field` is an input field, used for user search.\n\nThe `ui5-search-field` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchField.js\";`\n
|
|
660
|
+
"description": "### Overview\n\nA `ui5-search-field` is an input field, used for user search.\n\nThe `ui5-search-field` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchField.js\";`\n---\n\n\n### **Events:**\n - **input** - Fired when typing in input or clear icon is pressed.\n- **scope-change** - Fired when the scope has changed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.\n\n### **Slots:**\n - **filterButton** - Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.\n- **scopes** - Defines the component scope options.",
|
|
687
661
|
"attributes": [
|
|
688
662
|
{
|
|
689
663
|
"name": "accessible-description",
|
|
@@ -725,7 +699,7 @@
|
|
|
725
699
|
},
|
|
726
700
|
{
|
|
727
701
|
"name": "ui5-search-item",
|
|
728
|
-
"description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`\n
|
|
702
|
+
"description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`\n---\n\n\n### **Events:**\n - **delete** - Fired when delete button is pressed.\n\n### **Slots:**\n - **actions** - Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.\n- **image** - **Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS.",
|
|
729
703
|
"attributes": [
|
|
730
704
|
{
|
|
731
705
|
"name": "deletable",
|
|
@@ -762,13 +736,13 @@
|
|
|
762
736
|
},
|
|
763
737
|
{
|
|
764
738
|
"name": "ui5-search-item-group",
|
|
765
|
-
"description": "The `ui5-search-item-group` is type of suggestion item,\nthat can be used to split the `ui5-search-item` suggestions into groups.\n
|
|
739
|
+
"description": "The `ui5-search-item-group` is type of suggestion item,\nthat can be used to split the `ui5-search-item` suggestions into groups.\n---\n",
|
|
766
740
|
"attributes": [],
|
|
767
741
|
"references": []
|
|
768
742
|
},
|
|
769
743
|
{
|
|
770
744
|
"name": "ui5-search-item-show-more",
|
|
771
|
-
"description": "### Overview\n\nA `ui5-search-item-show-more` is a special type of ui5-li that acts as a button to progressively reveal additional (overflow) items within a group.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItemShowMore.js\";`\n
|
|
745
|
+
"description": "### Overview\n\nA `ui5-search-item-show-more` is a special type of ui5-li that acts as a button to progressively reveal additional (overflow) items within a group.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItemShowMore.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated, either with a mouse/tap\nor by pressing the Enter or Space keys.",
|
|
772
746
|
"attributes": [
|
|
773
747
|
{
|
|
774
748
|
"name": "items-to-show-count",
|
|
@@ -785,7 +759,7 @@
|
|
|
785
759
|
},
|
|
786
760
|
{
|
|
787
761
|
"name": "ui5-search-message-area",
|
|
788
|
-
"description": "`import \"@ui5/webcomponents-fiori/dist/SearchMessageArea.js\";`\n
|
|
762
|
+
"description": "`import \"@ui5/webcomponents-fiori/dist/SearchMessageArea.js\";`\n---\n",
|
|
789
763
|
"attributes": [
|
|
790
764
|
{
|
|
791
765
|
"name": "description",
|
|
@@ -802,7 +776,7 @@
|
|
|
802
776
|
},
|
|
803
777
|
{
|
|
804
778
|
"name": "ui5-search-scope",
|
|
805
|
-
"description": "The `ui5-search-scope` represents the options for the scope in `ui5-search`.\n
|
|
779
|
+
"description": "The `ui5-search-scope` represents the options for the scope in `ui5-search`.\n---\n",
|
|
806
780
|
"attributes": [
|
|
807
781
|
{
|
|
808
782
|
"name": "text",
|
|
@@ -819,7 +793,7 @@
|
|
|
819
793
|
},
|
|
820
794
|
{
|
|
821
795
|
"name": "ui5-shellbar",
|
|
822
|
-
"description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`\n
|
|
796
|
+
"description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`\n---\n\n\n### **Events:**\n - **content-item-visibility-change** - Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.\n- **logo-click** - Fired, when the logo is activated.\n- **menu-item-click** - Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **notifications-click** - Fired, when the notification icon is activated.\n- **product-switch-click** - Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **profile-click** - Fired, when the profile slot is present.\n- **search-button-click** - Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.\n- **search-field-clear** - Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change.\n- **search-field-toggle** - Fired, when the search field is expanded or collapsed.\n\n### **Methods:**\n - **closeOverflow(): _void_** - Closes the overflow popover.\n- **getSearchButtonDomRef(): _Promise<HTMLElement | null>_** - Returns the search button DOM reference.\n\n### **Slots:**\n - **assistant** - Defines the assistant slot.\n- **branding** - Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.\n- **content** - Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.\n- **default** - Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the `<ui5-shellbar-item></ui5-shellbar-item>`.\n- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.\n- **menuItems** - Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the `<ui5-li></ui5-li>` and its ancestors.\n- **profile** - You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.\n- **searchField** - Defines the `ui5-input`, that will be used as a search field.\n- **startButton** - Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-shellbar`",
|
|
823
797
|
"attributes": [
|
|
824
798
|
{
|
|
825
799
|
"name": "accessibility-attributes",
|
|
@@ -839,7 +813,7 @@
|
|
|
839
813
|
{
|
|
840
814
|
"name": "logo-dom-ref",
|
|
841
815
|
"description": "Returns the `logo` DOM ref.",
|
|
842
|
-
"values": [
|
|
816
|
+
"values": []
|
|
843
817
|
},
|
|
844
818
|
{
|
|
845
819
|
"name": "notifications-count",
|
|
@@ -849,12 +823,12 @@
|
|
|
849
823
|
{
|
|
850
824
|
"name": "notifications-dom-ref",
|
|
851
825
|
"description": "Returns the `notifications` icon DOM ref.",
|
|
852
|
-
"values": [
|
|
826
|
+
"values": []
|
|
853
827
|
},
|
|
854
828
|
{
|
|
855
829
|
"name": "overflow-dom-ref",
|
|
856
830
|
"description": "Returns the `overflow` icon DOM ref.",
|
|
857
|
-
"values": [
|
|
831
|
+
"values": []
|
|
858
832
|
},
|
|
859
833
|
{
|
|
860
834
|
"name": "primary-title",
|
|
@@ -864,12 +838,12 @@
|
|
|
864
838
|
{
|
|
865
839
|
"name": "product-switch-dom-ref",
|
|
866
840
|
"description": "Returns the `product-switch` icon DOM ref.",
|
|
867
|
-
"values": [
|
|
841
|
+
"values": []
|
|
868
842
|
},
|
|
869
843
|
{
|
|
870
844
|
"name": "profile-dom-ref",
|
|
871
845
|
"description": "Returns the `profile` icon DOM ref.",
|
|
872
|
-
"values": [
|
|
846
|
+
"values": []
|
|
873
847
|
},
|
|
874
848
|
{
|
|
875
849
|
"name": "secondary-title",
|
|
@@ -896,7 +870,7 @@
|
|
|
896
870
|
},
|
|
897
871
|
{
|
|
898
872
|
"name": "ui5-shellbar-branding",
|
|
899
|
-
"description": "### Overview\nThe `ui5-shellbar-branding` component is intended to be placed inside the branding slot of the\n`ui5-shellbar` component. Its content has higher priority than the `primaryTitle` property\nand the `logo` slot of `ui5-shellbar`.\n
|
|
873
|
+
"description": "### Overview\nThe `ui5-shellbar-branding` component is intended to be placed inside the branding slot of the\n`ui5-shellbar` component. Its content has higher priority than the `primaryTitle` property\nand the `logo` slot of `ui5-shellbar`.\n---\n\n\n### **Events:**\n - **click** - Fired, when the logo is activated.\n\n### **Slots:**\n - **default** - Defines the title for the ui5-shellbar-branding component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.",
|
|
900
874
|
"attributes": [
|
|
901
875
|
{
|
|
902
876
|
"name": "accessible-name",
|
|
@@ -918,7 +892,7 @@
|
|
|
918
892
|
},
|
|
919
893
|
{
|
|
920
894
|
"name": "ui5-shellbar-item",
|
|
921
|
-
"description": "The `ui5-shellbar-item` represents a custom item for `ui5-shellbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`\n
|
|
895
|
+
"description": "The `ui5-shellbar-item` represents a custom item for `ui5-shellbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the item is clicked.",
|
|
922
896
|
"attributes": [
|
|
923
897
|
{
|
|
924
898
|
"name": "accessibility-attributes",
|
|
@@ -945,7 +919,7 @@
|
|
|
945
919
|
},
|
|
946
920
|
{
|
|
947
921
|
"name": "ui5-shellbar-search",
|
|
948
|
-
"description": "Search field for the ShellBar component.\n
|
|
922
|
+
"description": "Search field for the ShellBar component.\n---\n",
|
|
949
923
|
"attributes": [
|
|
950
924
|
{
|
|
951
925
|
"name": "auto-open",
|
|
@@ -953,17 +927,17 @@
|
|
|
953
927
|
"values": []
|
|
954
928
|
}
|
|
955
929
|
],
|
|
956
|
-
"references": [
|
|
930
|
+
"references": []
|
|
957
931
|
},
|
|
958
932
|
{
|
|
959
933
|
"name": "ui5-shellbar-spacer",
|
|
960
|
-
"description": "### Overview\nThe `ui5-shellbar-spacer` is an element, used for visual separation between the two content parts of the `ui5-shellbar`.\n**Note:** The `ui5-shellbar-spacer` component is in an experimental state and is a subject to change.\n
|
|
934
|
+
"description": "### Overview\nThe `ui5-shellbar-spacer` is an element, used for visual separation between the two content parts of the `ui5-shellbar`.\n**Note:** The `ui5-shellbar-spacer` component is in an experimental state and is a subject to change.\n---\n",
|
|
961
935
|
"attributes": [],
|
|
962
936
|
"references": []
|
|
963
937
|
},
|
|
964
938
|
{
|
|
965
939
|
"name": "ui5-side-navigation",
|
|
966
|
-
"description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n
|
|
940
|
+
"description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n- **item-toggle** - Fired when a `ui5-side-navigation-item` or `ui5-side-navigation-group` is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event to suppress the expand/collapse.\nThe `expanded` state stays unchanged. This is handy, for example, if you want to\ndynamically load child items before allowing a parent item to expand.\n- **selection-change** - Fired when the selection has changed via user interaction.\n\n### **Slots:**\n - **default** - Defines the main items of the component.\n- **fixedItems** - Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n- **header** - Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
|
|
967
941
|
"attributes": [
|
|
968
942
|
{
|
|
969
943
|
"name": "accessible-name",
|
|
@@ -980,7 +954,7 @@
|
|
|
980
954
|
},
|
|
981
955
|
{
|
|
982
956
|
"name": "ui5-side-navigation-group",
|
|
983
|
-
"description": "### Overview\n\nRepresents a group of navigation actions within `ui5-side-navigation`.\nThe `ui5-side-navigation-group` can only be used inside a `ui5-side-navigation`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";`\n
|
|
957
|
+
"description": "### Overview\n\nRepresents a group of navigation actions within `ui5-side-navigation`.\nThe `ui5-side-navigation-group` can only be used inside a `ui5-side-navigation`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines nested items by passing `ui5-side-navigation-item` to the default slot.",
|
|
984
958
|
"attributes": [
|
|
985
959
|
{
|
|
986
960
|
"name": "accessible-name",
|
|
@@ -1012,7 +986,7 @@
|
|
|
1012
986
|
},
|
|
1013
987
|
{
|
|
1014
988
|
"name": "ui5-side-navigation-item",
|
|
1015
|
-
"description": "### Overview\n\nRepresents a navigation action. It can provide sub items.\nThe `ui5-side-navigation-item` is used within `ui5-side-navigation` or `ui5-side-navigation-group` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";`\n
|
|
989
|
+
"description": "### Overview\n\nRepresents a navigation action. It can provide sub items.\nThe `ui5-side-navigation-item` is used within `ui5-side-navigation` or `ui5-side-navigation-group` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.\n\n### **Slots:**\n - **default** - Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot.\n- **tag** - Defines the tag to be displayed.\n\n**Note:** Tags are visible when the <code>NavigationList</code> is in expanded mode,\nand hidden when collapsed, but they are visible in the overflow of the collapsed mode.\n\n**Note:** Only one `ui5-tag` is allowed. The tag should use `design=\"Set2\"`, `hide-state-icon`,\nand `colorScheme` values 5-10 to avoid confusion with semantic colors (1-4).\n\n**Note:** It is recommended to limit tag width to 64px (4rem). If tag text exceeds this,\nuse shortened forms or abbreviations (e.g., \"Experimental\" → \"Exp\").\n\n**Important:** The <code>ui5-tag</code> must never be interactive (i.e., <code>active</code> must not be set to <code>true</code>),\nas this would lead to nesting of interactive elements, which is not allowed.",
|
|
1016
990
|
"attributes": [
|
|
1017
991
|
{
|
|
1018
992
|
"name": "accessibility-attributes",
|
|
@@ -1077,98 +1051,9 @@
|
|
|
1077
1051
|
],
|
|
1078
1052
|
"references": []
|
|
1079
1053
|
},
|
|
1080
|
-
{
|
|
1081
|
-
"name": "side-navigation-item-base",
|
|
1082
|
-
"description": "Base class for the items that are accepted by the `ui5-side-navigation` component.\n\n\n---\n\n\n",
|
|
1083
|
-
"attributes": [
|
|
1084
|
-
{
|
|
1085
|
-
"name": "accessible-name",
|
|
1086
|
-
"description": "Defines the accessible ARIA name of the component.",
|
|
1087
|
-
"values": []
|
|
1088
|
-
},
|
|
1089
|
-
{
|
|
1090
|
-
"name": "disabled",
|
|
1091
|
-
"description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
|
|
1092
|
-
"values": []
|
|
1093
|
-
},
|
|
1094
|
-
{
|
|
1095
|
-
"name": "text",
|
|
1096
|
-
"description": "Defines the text of the item.",
|
|
1097
|
-
"values": []
|
|
1098
|
-
},
|
|
1099
|
-
{
|
|
1100
|
-
"name": "tooltip",
|
|
1101
|
-
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
|
|
1102
|
-
"values": []
|
|
1103
|
-
}
|
|
1104
|
-
],
|
|
1105
|
-
"references": []
|
|
1106
|
-
},
|
|
1107
|
-
{
|
|
1108
|
-
"name": "side-navigation-selectable-item-base",
|
|
1109
|
-
"description": "Base class for the navigation items that support actions.\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.",
|
|
1110
|
-
"attributes": [
|
|
1111
|
-
{
|
|
1112
|
-
"name": "accessibility-attributes",
|
|
1113
|
-
"description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
|
|
1114
|
-
"values": [{ "name": "SideNavigationItemAccessibilityAttributes" }]
|
|
1115
|
-
},
|
|
1116
|
-
{
|
|
1117
|
-
"name": "accessible-name",
|
|
1118
|
-
"description": "Defines the accessible ARIA name of the component.",
|
|
1119
|
-
"values": []
|
|
1120
|
-
},
|
|
1121
|
-
{
|
|
1122
|
-
"name": "design",
|
|
1123
|
-
"description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
|
|
1124
|
-
"values": [{ "name": "Default" }, { "name": "Action" }]
|
|
1125
|
-
},
|
|
1126
|
-
{
|
|
1127
|
-
"name": "disabled",
|
|
1128
|
-
"description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
|
|
1129
|
-
"values": []
|
|
1130
|
-
},
|
|
1131
|
-
{
|
|
1132
|
-
"name": "href",
|
|
1133
|
-
"description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.",
|
|
1134
|
-
"values": []
|
|
1135
|
-
},
|
|
1136
|
-
{
|
|
1137
|
-
"name": "icon",
|
|
1138
|
-
"description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
|
|
1139
|
-
"values": []
|
|
1140
|
-
},
|
|
1141
|
-
{
|
|
1142
|
-
"name": "selected",
|
|
1143
|
-
"description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
|
|
1144
|
-
"values": []
|
|
1145
|
-
},
|
|
1146
|
-
{
|
|
1147
|
-
"name": "target",
|
|
1148
|
-
"description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
|
|
1149
|
-
"values": []
|
|
1150
|
-
},
|
|
1151
|
-
{
|
|
1152
|
-
"name": "text",
|
|
1153
|
-
"description": "Defines the text of the item.",
|
|
1154
|
-
"values": []
|
|
1155
|
-
},
|
|
1156
|
-
{
|
|
1157
|
-
"name": "tooltip",
|
|
1158
|
-
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
|
|
1159
|
-
"values": []
|
|
1160
|
-
},
|
|
1161
|
-
{
|
|
1162
|
-
"name": "unselectable",
|
|
1163
|
-
"description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
|
|
1164
|
-
"values": []
|
|
1165
|
-
}
|
|
1166
|
-
],
|
|
1167
|
-
"references": []
|
|
1168
|
-
},
|
|
1169
1054
|
{
|
|
1170
1055
|
"name": "ui5-side-navigation-sub-item",
|
|
1171
|
-
"description": "### Overview\nRepresents a single navigation action within `ui5-side-navigation-item`.\nThe `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";`\n
|
|
1056
|
+
"description": "### Overview\nRepresents a single navigation action within `ui5-side-navigation-item`.\nThe `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.\n\n### **Slots:**\n - **tag** - Defines the tag to be displayed.\n\n**Note:** Tags are visible when the <code>NavigationList</code> is in expanded mode,\nand hidden when collapsed, but they are visible in the overflow of the collapsed mode.\n\n**Note:** Only one `ui5-tag` is allowed. The tag should use `design=\"Set2\"`, `hide-state-icon`,\nand `colorScheme` values 5-10 to avoid confusion with semantic colors (1-4).\n\n**Note:** It is recommended to limit tag width to 64px (4rem). If tag text exceeds this,\nuse shortened forms or abbreviations (e.g., \"Experimental\" → \"Exp\").\n\n**Important:** The <code>ui5-tag</code> must never be interactive (i.e., <code>active</code> must not be set to <code>true</code>),\nas this would lead to nesting of interactive elements, which is not allowed.",
|
|
1172
1057
|
"attributes": [
|
|
1173
1058
|
{
|
|
1174
1059
|
"name": "accessibility-attributes",
|
|
@@ -1230,7 +1115,7 @@
|
|
|
1230
1115
|
},
|
|
1231
1116
|
{
|
|
1232
1117
|
"name": "ui5-sort-item",
|
|
1233
|
-
"description": "### Overview\n\nThe `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.\nIt represents a single sort option that users can select to organize data in ascending or descending order.\n\n### Usage\n\nThe `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.\nEach sort item represents a column or field by which data can be sorted.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n
|
|
1118
|
+
"description": "### Overview\n\nThe `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.\nIt represents a single sort option that users can select to organize data in ascending or descending order.\n\n### Usage\n\nThe `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.\nEach sort item represents a column or field by which data can be sorted.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n---\n",
|
|
1234
1119
|
"attributes": [
|
|
1235
1120
|
{
|
|
1236
1121
|
"name": "selected",
|
|
@@ -1247,7 +1132,7 @@
|
|
|
1247
1132
|
},
|
|
1248
1133
|
{
|
|
1249
1134
|
"name": "ui5-timeline",
|
|
1250
|
-
"description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header and Info Bar Slots\n\nThe Timeline exposes two named slots above the items area:\n\n- `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).\nThe most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open\na filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or\nsearching — the application listens for events from its own controls and reorders, hides, or\nadds items in the default slot accordingly.\n\n- `infoBar` — for a status bar that reflects the result of the controls (active filters,\napplied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.\n\nThe Timeline itself does not filter, sort, or search — the application owns that logic.\nUse `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline\na constrained height in this mode so it owns its scrollbar.\n
|
|
1135
|
+
"description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header and Info Bar Slots\n\nThe Timeline exposes two named slots above the items area:\n\n- `header` — for a controls bar (search field, filter trigger, sort toggle, etc.).\nThe most common pattern is to place a `ui5-toolbar` containing a search input and buttons that open\na filter dialog or toggle sort direction. The Timeline itself performs no filtering, sorting, or\nsearching — the application listens for events from its own controls and reorders, hides, or\nadds items in the default slot accordingly.\n\n- `infoBar` — for a status bar that reflects the result of the controls (active filters,\napplied sort, current search query). Typically contains tokens, labels, or a `ui5-bar`.\n\nThe Timeline itself does not filter, sort, or search — the application owns that logic.\nUse `stickyHeader` to pin both bars while the Timeline's items scroll. Give the Timeline\na constrained height in this mode so it owns its scrollbar.\n---\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.\n- **header** - Defines the content of the Timeline's header area, displayed above the items.\nTypically a `ui5-toolbar` with search, sort, and filter controls.\n- **infoBar** - Defines the content of the Timeline's info bar area, displayed below the header\nand above the items. Use for status display (applied filters, sort direction, counts).",
|
|
1251
1136
|
"attributes": [
|
|
1252
1137
|
{
|
|
1253
1138
|
"name": "accessible-name",
|
|
@@ -1288,7 +1173,7 @@
|
|
|
1288
1173
|
},
|
|
1289
1174
|
{
|
|
1290
1175
|
"name": "ui5-timeline-group-item",
|
|
1291
|
-
"description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of `<ui5-timeline-item>`s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.\n
|
|
1176
|
+
"description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of `<ui5-timeline-item>`s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.\n---\n\n\n### **Events:**\n - **toggle** - Fired when the group item is expanded or collapsed.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline-group-item`.",
|
|
1292
1177
|
"attributes": [
|
|
1293
1178
|
{
|
|
1294
1179
|
"name": "collapsed",
|
|
@@ -1305,7 +1190,7 @@
|
|
|
1305
1190
|
},
|
|
1306
1191
|
{
|
|
1307
1192
|
"name": "ui5-timeline-item",
|
|
1308
|
-
"description": "### Overview\n\nAn entry posted on the timeline.\n
|
|
1193
|
+
"description": "### Overview\n\nAn entry posted on the timeline.\n---\n\n\n### **Events:**\n - **name-click** - Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set.\n\n### **Slots:**\n - **default** - Defines the content of the `ui5-timeline-item`.",
|
|
1309
1194
|
"attributes": [
|
|
1310
1195
|
{
|
|
1311
1196
|
"name": "icon",
|
|
@@ -1353,7 +1238,7 @@
|
|
|
1353
1238
|
},
|
|
1354
1239
|
{
|
|
1355
1240
|
"name": "ui5-upload-collection",
|
|
1356
|
-
"description": "### Overview\nThis component allows you to represent files before uploading them to a server, with the help of `ui5-upload-collection-item`.\nIt also allows you to show already uploaded files.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UploadCollection.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";` (for `ui5-upload-collection-item`)\n
|
|
1241
|
+
"description": "### Overview\nThis component allows you to represent files before uploading them to a server, with the help of `ui5-upload-collection-item`.\nIt also allows you to show already uploaded files.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UploadCollection.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";` (for `ui5-upload-collection-item`)\n---\n\n\n### **Events:**\n - **item-delete** - Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single` and `Multiple` modes.\n\n### **Slots:**\n - **default** - Defines the items of the `ui5-upload-collection`.\n\n**Note:** Use `ui5-upload-collection-item` for the intended design.\n- **header** - Defines the `ui5-upload-collection` header.\n\n**Note:** If `header` slot is provided,\nthe labelling of the `UploadCollection` is a responsibility of the application developer.\n`accessibleName` should be used.",
|
|
1357
1242
|
"attributes": [
|
|
1358
1243
|
{
|
|
1359
1244
|
"name": "accessible-name",
|
|
@@ -1404,7 +1289,7 @@
|
|
|
1404
1289
|
},
|
|
1405
1290
|
{
|
|
1406
1291
|
"name": "ui5-upload-collection-item",
|
|
1407
|
-
"description": "### Overview\nA component to be used within the `ui5-upload-collection`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";`\n
|
|
1292
|
+
"description": "### Overview\nA component to be used within the `ui5-upload-collection`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";`\n---\n\n\n### **Events:**\n - **file-name-click** - Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`.\n- **rename** - Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`.\n- **retry** - Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`.\n- **terminate** - Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.\n\n### **Slots:**\n - **default** - Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name.\n- **thumbnail** - A thumbnail, which will be shown in the beginning of the `ui5-upload-collection-item`.\n\n**Note:** Use `ui5-icon` or `img` for the intended design.",
|
|
1408
1293
|
"attributes": [
|
|
1409
1294
|
{
|
|
1410
1295
|
"name": "disable-delete-button",
|
|
@@ -1461,7 +1346,7 @@
|
|
|
1461
1346
|
},
|
|
1462
1347
|
{
|
|
1463
1348
|
"name": "ui5-user-menu",
|
|
1464
|
-
"description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)\n
|
|
1349
|
+
"description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)\n---\n\n\n### **Events:**\n - **avatar-click** - Fired when the account avatar is selected.\n- **change-account** - Fired when the account is switched to a different one.\n- **close** - Fired when a user menu is close.\n- **edit-accounts-click** - Fired when the \"Edit Accounts\" button is selected.\n- **item-click** - Fired when a menu item is selected.\n- **manage-account-click** - Fired when the \"Manage Account\" button is selected.\n- **open** - Fired when a user menu is open.\n- **sign-out-click** - Fired when the \"Sign Out\" button is selected.\n\n### **Slots:**\n - **accounts** - Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.\n- **default** - Defines the menu items.\n- **footer** - Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely.\n- **infoArea** - Defines the content of the info area inside the User Menu's account block.\n\n**Note:** When empty, the User Menu renders unchanged.",
|
|
1465
1350
|
"attributes": [
|
|
1466
1351
|
{
|
|
1467
1352
|
"name": "avatar-interactive",
|
|
@@ -1503,7 +1388,7 @@
|
|
|
1503
1388
|
},
|
|
1504
1389
|
{
|
|
1505
1390
|
"name": "ui5-user-menu-account",
|
|
1506
|
-
"description": "### Overview\n\nThe `ui5-user-menu-account` represents an account in the `ui5-user-menu`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenuAccount.js\";`\n
|
|
1391
|
+
"description": "### Overview\n\nThe `ui5-user-menu-account` represents an account in the `ui5-user-menu`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenuAccount.js\";`\n---\n",
|
|
1507
1392
|
"attributes": [
|
|
1508
1393
|
{
|
|
1509
1394
|
"name": "additional-info",
|
|
@@ -1569,7 +1454,7 @@
|
|
|
1569
1454
|
},
|
|
1570
1455
|
{
|
|
1571
1456
|
"name": "ui5-user-menu-item",
|
|
1572
|
-
"description": "### Overview\n\n`ui5-user-menu-item` is the item to use inside a `ui5-user-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-user-menu-item` represents a node in a `ui5-user-menu`. The user menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a menu item in that menu. Therefore, you should only use\n`ui5-user-menu-item` directly in your apps. The `ui5-menu` menu item is internal for the menu, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";`\n
|
|
1457
|
+
"description": "### Overview\n\n`ui5-user-menu-item` is the item to use inside a `ui5-user-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-user-menu-item` represents a node in a `ui5-user-menu`. The user menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a menu item in that menu. Therefore, you should only use\n`ui5-user-menu-item` directly in your apps. The `ui5-menu` menu item is internal for the menu, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-user-menu-item` for the intended design.",
|
|
1573
1458
|
"attributes": [
|
|
1574
1459
|
{
|
|
1575
1460
|
"name": "show-selection",
|
|
@@ -1581,13 +1466,13 @@
|
|
|
1581
1466
|
},
|
|
1582
1467
|
{
|
|
1583
1468
|
"name": "ui5-user-menu-item-group",
|
|
1584
|
-
"description": "### Overview\n\nThe `ui5-user-menu-item-group` component represents a group of items designed for use inside a `ui5-user-menu`.\nItems belonging to the same group should be wrapped by a `ui5-user-menu-item-group`.\nEach group can have an `itemCheckMode` property, which defines the check mode for the items within the group.\nThe possible values for `itemCheckMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `itemCheckMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-user-menu-item-group` represents a collection of `ui5-user-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/UserMenuItemGroup.js\";`\n
|
|
1469
|
+
"description": "### Overview\n\nThe `ui5-user-menu-item-group` component represents a group of items designed for use inside a `ui5-user-menu`.\nItems belonging to the same group should be wrapped by a `ui5-user-menu-item-group`.\nEach group can have an `itemCheckMode` property, which defines the check mode for the items within the group.\nThe possible values for `itemCheckMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `itemCheckMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-user-menu-item-group` represents a collection of `ui5-user-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/UserMenuItemGroup.js\";`\n---\n",
|
|
1585
1470
|
"attributes": [],
|
|
1586
1471
|
"references": []
|
|
1587
1472
|
},
|
|
1588
1473
|
{
|
|
1589
1474
|
"name": "ui5-user-settings-account-view",
|
|
1590
|
-
"description": "### Overview\n\nThe `ui5-user-settings-account-view` represents a view displayed in the `ui5-user-settings-item`.\n
|
|
1475
|
+
"description": "### Overview\n\nThe `ui5-user-settings-account-view` represents a view displayed in the `ui5-user-settings-item`.\n---\n\n\n### **Events:**\n - **edit-accounts-click** - Fired when the `Edit Accounts` button is selected.\n- **manage-account-click** - Fired when the `Manage Account` button is selected.\n\n### **Slots:**\n - **account** - Defines the user account.\n- **default** - Defines the content of the view.",
|
|
1591
1476
|
"attributes": [
|
|
1592
1477
|
{
|
|
1593
1478
|
"name": "secondary",
|
|
@@ -1619,7 +1504,7 @@
|
|
|
1619
1504
|
},
|
|
1620
1505
|
{
|
|
1621
1506
|
"name": "ui5-user-settings-appearance-view",
|
|
1622
|
-
"description": "### Overview\n\nThe `ui5-user-settings-appearance-view` represents a view displayed in the `ui5-user-settings-item`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js\";`\n
|
|
1507
|
+
"description": "### Overview\n\nThe `ui5-user-settings-appearance-view` represents a view displayed in the `ui5-user-settings-item`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when an item is selected.\n\n### **Slots:**\n - **additionalContent** - Defines additional content displayed below the items list.\n- **default** - Defines the items of the component.",
|
|
1623
1508
|
"attributes": [
|
|
1624
1509
|
{
|
|
1625
1510
|
"name": "secondary",
|
|
@@ -1641,13 +1526,13 @@
|
|
|
1641
1526
|
},
|
|
1642
1527
|
{
|
|
1643
1528
|
"name": "ui5-user-settings-appearance-view-group",
|
|
1644
|
-
"description": "### Overview\n\nThe `ui5-user-settings-appearance-view-group` is a special list item group used to group appearance view items.\n\nThis is the item to use inside a `ui5-user-settings-appearance-view`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js\";`\n
|
|
1529
|
+
"description": "### Overview\n\nThe `ui5-user-settings-appearance-view-group` is a special list item group used to group appearance view items.\n\nThis is the item to use inside a `ui5-user-settings-appearance-view`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the items of the <code>ui5-user-settings-appearance-view-group</code>.",
|
|
1645
1530
|
"attributes": [],
|
|
1646
1531
|
"references": []
|
|
1647
1532
|
},
|
|
1648
1533
|
{
|
|
1649
1534
|
"name": "ui5-user-settings-appearance-view-item",
|
|
1650
|
-
"description": "### Overview\n\nThe `ui5-user-settings-appearance-view-item` represents a theme/appearance option item\nwithin the `ui5-user-settings-appearance-view`.\n\nIt displays a theme with an avatar icon, text label, and can be selected.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js\";`\n
|
|
1535
|
+
"description": "### Overview\n\nThe `ui5-user-settings-appearance-view-item` represents a theme/appearance option item\nwithin the `ui5-user-settings-appearance-view`.\n\nIt displays a theme with an avatar icon, text label, and can be selected.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js\";`\n---\n",
|
|
1651
1536
|
"attributes": [
|
|
1652
1537
|
{
|
|
1653
1538
|
"name": "color-scheme",
|
|
@@ -1674,7 +1559,7 @@
|
|
|
1674
1559
|
},
|
|
1675
1560
|
{
|
|
1676
1561
|
"name": "ui5-user-settings-dialog",
|
|
1677
|
-
"description": "### Overview\n\nThe `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\nIt allows the user to easily view information and settings for an account.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`\n
|
|
1562
|
+
"description": "### Overview\n\nThe `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\nIt allows the user to easily view information and settings for an account.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the settings dialog is closed.\n\n**Note:** This event is cancelable via `preventDefault()`, allowing the application to keep the\ndialog open — for example, to prompt the user about unsaved changes before dismissal.\n- **cancel** - Fired when the Cancel button in the footer is clicked.\nThe dialog does not close automatically — the application is responsible\nfor closing it after discarding the changes.\n- **close** - Fired when the settings dialog is closed.\n- **open** - Fired when the settings dialog is opened.\n- **save** - Fired when the Save button in the footer is clicked.\nThe dialog does not close automatically — the application is responsible\nfor closing it after persisting the changes.\n- **selection-change** - Fired when an item is selected.\n\n### **Slots:**\n - **default** - Defines the user settings items.\n\n**Note:** If no setting item is set as `selected`, the first one will be selected.\n- **fixedItems** - Defines the fixed user settings items.",
|
|
1678
1563
|
"attributes": [
|
|
1679
1564
|
{
|
|
1680
1565
|
"name": "header-text",
|
|
@@ -1701,7 +1586,7 @@
|
|
|
1701
1586
|
},
|
|
1702
1587
|
{
|
|
1703
1588
|
"name": "ui5-user-settings-item",
|
|
1704
|
-
"description": "### Overview\n\nThe `ui5-user-settings-item` represents an item in the `ui5-user-settings-dialog`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsItem.js\";`\n\nYou can disable the <code>UserSettingsItem</code> by setting the <code>enabled</code> property to <code>false</code>,\nor use the <code>UserSettingsItem</code> in read-only mode by setting the <code>editable</code> property to false.\n\n<b>Note:</b> Disabled and read-only states shouldn't be used together.\n
|
|
1589
|
+
"description": "### Overview\n\nThe `ui5-user-settings-item` represents an item in the `ui5-user-settings-dialog`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsItem.js\";`\n\nYou can disable the <code>UserSettingsItem</code> by setting the <code>enabled</code> property to <code>false</code>,\nor use the <code>UserSettingsItem</code> in read-only mode by setting the <code>editable</code> property to false.\n\n<b>Note:</b> Disabled and read-only states shouldn't be used together.\n---\n\n\n### **Events:**\n - **selection-change** - Fired when a selected view changed.\n\n### **Slots:**\n - **default** - Defines the page views of the user settings item.\n\nIf there are no tab views, the first page view will be shown unless there is selected one. If there is selected page\nview it will be shown no matter if there are tab views.\n\nThe page views are displayed by default if there is no selected tab view.\n- **tabs** - Defines the tab views of the user settings item.",
|
|
1705
1590
|
"attributes": [
|
|
1706
1591
|
{
|
|
1707
1592
|
"name": "accessible-name",
|
|
@@ -1749,7 +1634,7 @@
|
|
|
1749
1634
|
},
|
|
1750
1635
|
{
|
|
1751
1636
|
"name": "ui5-user-settings-view",
|
|
1752
|
-
"description": "### Overview\n\nThe `ui5-user-settings-view` represents a view displayed in the `ui5-user-settings-item`.\n
|
|
1637
|
+
"description": "### Overview\n\nThe `ui5-user-settings-view` represents a view displayed in the `ui5-user-settings-item`.\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the view.",
|
|
1753
1638
|
"attributes": [
|
|
1754
1639
|
{
|
|
1755
1640
|
"name": "secondary",
|
|
@@ -1771,7 +1656,7 @@
|
|
|
1771
1656
|
},
|
|
1772
1657
|
{
|
|
1773
1658
|
"name": "ui5-view-settings-dialog",
|
|
1774
|
-
"description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n
|
|
1659
|
+
"description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n- **reset** - Fired when the Reset button is clicked.\n\n**Note:** This event is particularly relevant when the dialog contains custom tabs.\nBy default, the Reset button resets all built-in settings (sort, filter, group) to their\ninitial values. However, the component has no knowledge of the content or state inside\ncustom tabs — it cannot detect what has changed or what the \"default\" values are.\nTherefore, when this event is fired, it is the application developer's responsibility\nto listen for it and manually reset the custom tab content to its initial state.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **customTabs** - Defines custom tabs for the dialog.\n\nThe custom tabs are rendered after the built-in tabs (`Sort`, `Filter`, `Group`).\n\n**Note:** If you want to use this slot, you need to import the item: `import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n- **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
|
|
1775
1660
|
"attributes": [
|
|
1776
1661
|
{
|
|
1777
1662
|
"name": "group-descending",
|
|
@@ -1798,7 +1683,7 @@
|
|
|
1798
1683
|
},
|
|
1799
1684
|
{
|
|
1800
1685
|
"name": "ui5-view-settings-dialog-custom-tab",
|
|
1801
|
-
"description": "### Overview\n\nThe `ui5-view-settings-dialog-custom-tab` component allows defining custom tabs for the `ui5-view-settings-dialog`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n
|
|
1686
|
+
"description": "### Overview\n\nThe `ui5-view-settings-dialog-custom-tab` component allows defining custom tabs for the `ui5-view-settings-dialog`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the custom tab content.\n- **default** - Defines the custom tab content.",
|
|
1802
1687
|
"attributes": [
|
|
1803
1688
|
{
|
|
1804
1689
|
"name": "icon",
|
|
@@ -1820,7 +1705,7 @@
|
|
|
1820
1705
|
},
|
|
1821
1706
|
{
|
|
1822
1707
|
"name": "ui5-wizard",
|
|
1823
|
-
"description": "### Overview\n\nThe `ui5-wizard` helps users to complete a complex task by dividing it into sections and guiding them through it.\nIt has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n### Structure\n#### Navigation area\nThe top most area of the `ui5-wizard` is occupied by the navigation area.\nIt shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.\n\n- Steps can have different visual representations - numbers or icons.\n- Steps might have labels for better readability - titleText and subTitleText.\n- Steps are defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n**Note:** If no selected step is defined, the first step will be auto selected.\n\n**Note:** If multiple selected steps are defined, the last step will be selected.\n\n### Keyboard Handling\nThe user can navigate using the following keyboard shortcuts:\n\n#### Wizard Progress Navigation\n\n\t- [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.\n\t- [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.\n\t- [Space] / [Enter] or [Return] - Selects an active step\n\t- [Home] or [PAGE UP] - Focus goes to the first step\n\t- [End] or [PAGE DOWN] - Focus goes to the last step\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Content\nThe content occupies the main part of the page. It can hold any type of HTML elements.\nIt's defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n### Scrolling\nThe component handles user scrolling by selecting the closest step, based on the current scroll position\nand scrolls to particular place, when the user clicks on the step within the navigation area.\n\n**Important:** In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height.\nThe component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.\n\n**For example:**\n\n```html\n<ui5-dialog style=\"height: 80%\">\n\t<ui5-wizard></ui5-wizard>\n</ui5-dialog>\n```\n\n#### Moving to next step\nThe `ui5-wizard-step` provides the necessary API and it's up to the user of the component to use it to move to the next step.\nYou have to set its `selected` property (and remove the `disabled` one if set) to `true`.\nThe `ui5-wizard` will automatically scroll to the content of the newly selected step.\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area.\nYou can place a button, or any other type of element to trigger step change, inside the `ui5-wizard-step`,\nand show/hide it when certain fields are filled or user defined criteria is met.\n\n### Usage\n#### When to use:\nWhen the user has to accomplish a long or unfamiliar task.\n\n#### When not to use:\nWhen the task has less than 3 steps.\n\n### Responsive Behavior\nOn small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.\nTapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/Wizard.js\";` (includes <ui5-wizard-step/>)\n
|
|
1708
|
+
"description": "### Overview\n\nThe `ui5-wizard` helps users to complete a complex task by dividing it into sections and guiding them through it.\nIt has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n### Structure\n#### Navigation area\nThe top most area of the `ui5-wizard` is occupied by the navigation area.\nIt shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.\n\n- Steps can have different visual representations - numbers or icons.\n- Steps might have labels for better readability - titleText and subTitleText.\n- Steps are defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n**Note:** If no selected step is defined, the first step will be auto selected.\n\n**Note:** If multiple selected steps are defined, the last step will be selected.\n\n### Keyboard Handling\nThe user can navigate using the following keyboard shortcuts:\n\n#### Wizard Progress Navigation\n\n\t- [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.\n\t- [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.\n\t- [Space] / [Enter] or [Return] - Selects an active step\n\t- [Home] or [PAGE UP] - Focus goes to the first step\n\t- [End] or [PAGE DOWN] - Focus goes to the last step\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Content\nThe content occupies the main part of the page. It can hold any type of HTML elements.\nIt's defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n### Scrolling\nThe component handles user scrolling by selecting the closest step, based on the current scroll position\nand scrolls to particular place, when the user clicks on the step within the navigation area.\n\n**Important:** In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height.\nThe component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.\n\n**For example:**\n\n```html\n<ui5-dialog style=\"height: 80%\">\n\t<ui5-wizard></ui5-wizard>\n</ui5-dialog>\n```\n\n#### Moving to next step\nThe `ui5-wizard-step` provides the necessary API and it's up to the user of the component to use it to move to the next step.\nYou have to set its `selected` property (and remove the `disabled` one if set) to `true`.\nThe `ui5-wizard` will automatically scroll to the content of the newly selected step.\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area.\nYou can place a button, or any other type of element to trigger step change, inside the `ui5-wizard-step`,\nand show/hide it when certain fields are filled or user defined criteria is met.\n\n### Usage\n#### When to use:\nWhen the user has to accomplish a long or unfamiliar task.\n\n#### When not to use:\nWhen the task has less than 3 steps.\n\n### Responsive Behavior\nOn small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.\nTapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/Wizard.js\";` (includes <ui5-wizard-step/>)\n---\n\n\n### **Events:**\n - **step-change** - Fired when the step is changed by user interaction - either with scrolling,\nor by clicking on the steps within the component header.\n\n### **Slots:**\n - **default** - Defines the steps.\n\n**Note:** Use the available `ui5-wizard-step` component.\n\n### **CSS Parts:**\n - **navigator** - Used to style the progress navigator of the `ui5-wizard`.\n- **step-content** - Used to style a `ui5-wizard-step` container.",
|
|
1824
1709
|
"attributes": [
|
|
1825
1710
|
{
|
|
1826
1711
|
"name": "accessible-name",
|
|
@@ -1842,7 +1727,7 @@
|
|
|
1842
1727
|
},
|
|
1843
1728
|
{
|
|
1844
1729
|
"name": "ui5-wizard-step",
|
|
1845
|
-
"description": "### Overview\n\nA component that represents a logical step as part of the `ui5-wizard`.\nIt is meant to aggregate arbitrary HTML elements that form the content of a single step.\n\n### Structure\n\n- Each wizard step has arbitrary content.\n- Each wizard step might have texts - defined by the `titleText` and `subtitleText` properties.\n- Each wizard step might have an icon - defined by the `icon` property.\n- Each wizard step might display a number in place of the `icon`, when it's missing.\n\n### Usage\nThe `ui5-wizard-step` component should be used only as slot of the `ui5-wizard` component\nand should not be used standalone.\n
|
|
1730
|
+
"description": "### Overview\n\nA component that represents a logical step as part of the `ui5-wizard`.\nIt is meant to aggregate arbitrary HTML elements that form the content of a single step.\n\n### Structure\n\n- Each wizard step has arbitrary content.\n- Each wizard step might have texts - defined by the `titleText` and `subtitleText` properties.\n- Each wizard step might have an icon - defined by the `icon` property.\n- Each wizard step might display a number in place of the `icon`, when it's missing.\n\n### Usage\nThe `ui5-wizard-step` component should be used only as slot of the `ui5-wizard` component\nand should not be used standalone.\n---\n\n\n### **Slots:**\n - **default** - Defines the step content.",
|
|
1846
1731
|
"attributes": [
|
|
1847
1732
|
{
|
|
1848
1733
|
"name": "branching",
|
|
@@ -1879,7 +1764,7 @@
|
|
|
1879
1764
|
},
|
|
1880
1765
|
{
|
|
1881
1766
|
"name": "ui5-wizard-tab",
|
|
1882
|
-
"description": "### Overview\nPrivate component, used internally by the `ui5-wizard`\nto represent a \"step\" in the navigation header of the `ui5-wizard`.\n\n### Usage\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/WizardTab.js\";` (imported with <ui5-wizard>)\n
|
|
1767
|
+
"description": "### Overview\nPrivate component, used internally by the `ui5-wizard`\nto represent a \"step\" in the navigation header of the `ui5-wizard`.\n\n### Usage\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/WizardTab.js\";` (imported with <ui5-wizard>)\n---\n",
|
|
1883
1768
|
"attributes": [],
|
|
1884
1769
|
"references": []
|
|
1885
1770
|
}
|