Skip to main content

FlexibleColumnLayout

<ui5-flexible-column-layout> | Since 1.0.0-rc.8

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.

Usage​

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.

Responsive Behavior​

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.

Keyboard Handling​

Basic Navigation​

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"

Fast Navigation​

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"

ES6 Module Import​

import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";

Basic Sample​

Properties​

layout​

DescriptionDefines 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.
Type"OneColumn" | "TwoColumnsStartExpanded" | "TwoColumnsMidExpanded" | "ThreeColumnsMidExpanded" | "ThreeColumnsEndExpanded" | "ThreeColumnsStartExpandedEndHidden" | "ThreeColumnsMidExpandedEndHidden" | "MidColumnFullScreen" | "EndColumnFullScreen"
Default"OneColumn"

disableResizing​

DescriptionSpecifies if the user is allowed to change the columns layout by dragging the separator between the columns.
Typeboolean
Defaultfalse
Since2.0.0

accessibilityAttributes​

DescriptionDefines 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.
TypeFCLAccessibilityAttributes
Default
Since2.0.0

columnLayout​

DescriptionReturns 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.
TypeFlexibleColumnLayoutColumnLayout | undefined
Defaultundefined
Readonlytrue

startColumnVisible​

DescriptionReturns if the start column is visible.
Typeboolean
Defaulttrue
Readonlytrue

midColumnVisible​

DescriptionReturns if the middle column is visible.
Typeboolean
Defaultfalse
Readonlytrue

endColumnVisible​

DescriptionReturns if the end column is visible.
Typeboolean
Defaultfalse
Readonlytrue

visibleColumns​

DescriptionReturns the number of currently visible columns.
Typenumber
Default1
Readonlytrue

Slots​

startColumn​

DescriptionDefines the content in the start column.
TypeArray<HTMLElement>

midColumn​

DescriptionDefines the content in the middle column.
TypeArray<HTMLElement>

endColumn​

DescriptionDefines the content in the end column.
TypeArray<HTMLElement>

Events​

layout-change​

DescriptionFired when the layout changes via user interaction by dragging the separators or by changing the component size due to resizing.
TypeCustomEvent<FlexibleColumnLayoutLayoutChangeEventDetail>
Parameterslayout: "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
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
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.