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 dragging the column separators.
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.
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.
When a column separator is focused, the following keyboard
shortcuts allow the user to resize the columns and change the layout:
[Shift] + [Left] or [Shift] + [Right] - Moves the separator to the left or right, which resizes the columns accordingly.
[Left] or [Right] - Moves the separator to the left or right with a bigger step, which resizes the columns accordingly.
[Home] - Moves the separator to the start position.
[End] - Moves the separator to the end position.
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.
Defines additional accessibility attributes on different areas of the component. The accessibilityAttributes object has the following fields, where each field is an object supporting one or more accessibility attributes: - startColumn: startColumn.role and startColumn.name. - midColumn: midColumn.role and midColumn.name. - endColumn: endColumn.role and endColumn.name. - startSeparator: startSeparator.role and startSeparator.name. - endSeparator: endSeparator.role and endSeparator.name. The accessibility attributes support the following values: - role: Defines the accessible ARIA landmark role of the area. Accepts the following values: none, complementary, contentinfo, main or region. - name: Defines the accessible ARIA name of the area. Accepts any string.
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" | "ThreeColumnsStartHiddenMidExpanded" | "ThreeColumnsStartHiddenEndExpanded" | "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 separatorsUsed: boolean Indicates if the layout was changed by dragging the column separators resized: boolean Indicates if the layout was changed by resizing the entire component