The FlexibleColumnLayout implements the list-detail-detail paradigm by displaying up to three pages in separate columns.
There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns.
Use 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.).
The Component is flexible in a sense that the application can focus the user's attention on one particular column.
The FlexibleColumnLayout automatically displays the maximum possible number of columns based on layout property and the window size.
The component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,
and 3 columns for sizes bigger than 1023px.
[Space] / [Enter] or [Return] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).
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].
In order to use this functionality, you need to import the following module:
import "@ui5/webcomponents-base/dist/features/F6Navigation.js"
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].
In order to use this functionality, you need to import the following module:
import "@ui5/webcomponents-base/dist/features/F6Navigation.js"
Defines the columns layout and their proportion. Note: The layout also depends on the screen size - one column for screens smaller than 599px, two columns between 599px and 1023px and three columns for sizes bigger than 1023px. For example: layout=TwoColumnsStartExpanded means the layout will display up to two columns in 67%/33% proportion.
An object of strings that defines several additional accessibility texts for even further customization. It supports the following fields: - startColumnAccessibleName: the accessibility name for the startColumn region - midColumnAccessibleName: the accessibility name for the midColumn region - endColumnAccessibleName: the accessibility name for the endColumn region - startArrowLeftText: the text that the first arrow (between the begin and mid columns) will have when pointing to the left - startArrowRightText: the text that the first arrow (between the begin and mid columns) will have when pointing to the right - endArrowLeftText: the text that the second arrow (between the mid and end columns) will have when pointing to the left - endArrowRightText: the text that the second arrow (between the mid and end columns) will have when pointing to the right - startArrowContainerAccessibleName: the text that the first arrow container (between the begin and mid columns) will have as aria-label - endArrowContainerAccessibleName: the text that the second arrow container (between the mid and end columns) will have as aria-label
An object of strings that defines additional accessibility roles for further customization. It supports the following fields: - startColumnRole: the accessibility role for the startColumn - startArrowContainerRole: the accessibility role for the first arrow container (between the begin and mid columns) - midColumnRole: the accessibility role for the midColumn - endArrowContainerRole: the accessibility role for the second arrow container (between the mid and end columns) - endColumnRole: the accessibility role for the endColumn
Returns the current column layout, based on both the layout property and the screen size. For example: ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc, where the numbers represents the width of the start, middle and end columns.
layout: "OneColumn" | "TwoColumnsStartExpanded" | "TwoColumnsMidExpanded" | "ThreeColumnsMidExpanded" | "ThreeColumnsEndExpanded" | "ThreeColumnsStartExpandedEndHidden" | "ThreeColumnsMidExpandedEndHidden" | "MidColumnFullScreen" | "EndColumnFullScreen" The current layout columnLayout: array The effective column layout, f.e [67%, 33%, 0] startColumnVisible: boolean Indicates if the start column is currently visible midColumnVisible: boolean Indicates if the middle column is currently visible endColumnVisible: boolean Indicates if the end column is currently visible arrowsUsed: boolean Indicates if the layout is changed via the arrows resize: boolean Indicates if the layout is changed via resizing