Skip to main content

FlexibleColumnLayout

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.

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.

Keyboard Handling​

Basic Navigation​

  • [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"

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"

hideArrows​

DescriptionDefines the visibility of the arrows, used for expanding and shrinking the columns.
Typeboolean
Defaultfalse
Since1.0.0-rc.15

accessibilityTexts​

DescriptionAn 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
TypeFlexibleColumnLayoutAccessibilityTexts
Default
Since1.0.0-rc.11

accessibilityRoles​

DescriptionAn 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
TypeFlexibleColumnLayoutAccessibilityRoles
Default
Since1.1.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 clicking the arrows 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
arrowsUsed: boolean
Indicates if the layout is changed via the arrows
resize: boolean
Indicates if the layout is changed via resizing

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.