FlexibleColumnLayout

v1.0.0-rc.8
@ui5/webcomponents-fiori
<ui5-flexible-column-layout>

FlexibleColumnLayout - One Initial Column



10 inch Portable DVD 7 inch WidescreenPortable DVD Player w MP3 Astro Laptop 1516 Astro Phone 6 Audio/Video Cable Kit - 4m Beam Breaker B-1 Beam Breaker B-2 Beam Breaker B-3 Beam Breaker B-4 Camcorder View Benda Laptop 1408 Cepat Tablet 10.5 Gladiator MX
Edit

General Information
Product:

Description:

Supplier: Titanium
Rating:



Suppliers
Titanium Technocom Red Point Stores Very Best Screens Smartcards Alpha Printers Printer for All Oxynum Fasttech Ultrasonic United Speaker Experts Brainsoft
Edit


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<ui5-flexible-column-layout id="fcl">
	<!-- start column -->
	<div slot="startColumn">
		<ui5-shellbar primary-title="Dep. New York, USA">
		</ui5-shellbar>

		<ui5-list id="col1list" header-text="Employees">
		</ui5-list>
	</div>

	<!-- middle column -->
	<div slot="midColumn">
		<div class="colHeader">
			<ui5-button design="Emphasized">Edit</ui5-button>
			<ui5-button design="Transparent" icon="add"></ui5-button>
			<ui5-button id="fullscreenMidColumn" design="Transparent" icon="full-screen"></ui5-button>
			<ui5-button id="closeMidColumn" icon="decline" design="Transparent"></ui5-button>
		</div>

		<ui5-list id="col2list" header-text="Employees">
		</ui5-list>
	</div>

	<!-- end column -->
	<div slot="endColumn">
		<div class="colHeader">
			<ui5-button design="Emphasized">Edit</ui5-button>
			<ui5-button design="Transparent" icon="add"></ui5-button>
			<ui5-button id="fullscreenEndColumn" design="Transparent" icon="full-screen"></ui5-button>
			<ui5-button id="closeEndColumn" icon="decline" design="Transparent"></ui5-button>
		</div>

		<p>
			"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod..."
		</p>
	</div>
</ui5-flexible-column-layout>

<script>
	col1list.addEventListener("item-click", function(e) {
		fcl.layout = "TwoColumnsMidExpanded";
	});

	col2list.addEventListener("item-click", function(e) {
		fcl.layout = "ThreeColumnsEndExpanded";
	});

	closeMidColumn.addEventListener("click", function(e) {
		fcl.layout = "OneColumn";
	});
	fullscreenMidColumn.addEventListener("click", function(e) {
		fcl.layout = "MidColumnFullscreen";
	});

	fullscreenEndColumn.addEventListener("click", function(e) {
		fcl.layout = "EndColumnFullscreen";
	});

	closeEndColumn.addEventListener("click", function(e) {
		fcl.layout = "TwoColumnsMidExpanded";
	});
</script>

Overview

The FlexibleColumnLayout implements the master-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 900px, up to two columns between 900px and 1280px, and 3 columns for sizes bigger than 1280px.

ES6 Module Import

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
_layoutsConfiguration
_layouts-configuration
Object
Allows the user to replace the whole layouts configuration
columnLayout (readonly)
column-layout
Array
["100%", 0, 0]
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.
endColumnVisible (readonly)
end-column-visible
boolean
false
Returns if the end column is visible.
layout
FCLLayout
"OneColumn"
Defines the columns layout and their proportion.

Note: The layout also depends on the screen size - one column for screens smaller than 900px, two columns between 900px and 1280px and three columns for sizes bigger than 1280px.

Available options are:
  • OneColumn
  • TwoColumnsStartExpanded
  • TwoColumnsMidExpanded
  • ThreeColumnsMidExpanded
  • ThreeColumnsEndExpanded
  • ThreeColumnsStartExpandedEndHidden
  • ThreeColumnsMidExpandedEndHidden
  • MidColumnFullScreen
  • EndColumnFullScreen


For example: layout=TwoColumnsStartExpanded means the layout will display up to two columns in 67%/33% proportion.
midColumnVisible (readonly)
mid-column-visible
boolean
false
Returns if the middle column is visible.
noArrows
no-arrows
boolean
false
Defines the visibility of the arrows, used for expanding and shrinking the columns.
startColumnVisible (readonly)
start-column-visible
boolean
true
Returns if the start column is visible.
visibleColumns (readonly)
visible-columns
Integer
1
Returns the number of currently visible columns.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
endColumn
HTMLElement
Defines the content in the end column.
midColumn
HTMLElement
Defines the content in the middle column.
startColumn
HTMLElement
Defines the content in the start column.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
layout-change
Fired when the layout changes via user interaction by clicking the arrows or by changing the component size due to resizing.
layout
type: FCLLayout
description: the current layout
columnLayout
type: Array
description: the effective column layout, f.e [67%, 33%, 0]
startColumnVisible
type: boolean
description: indicates if the start column is currently visible
midColumnVisible
type: boolean
description: indicates if the middle column is currently visible
endColumnVisible
type: boolean
description: indicates if the end column is currently visible
arrowsUsed
type: boolean
description: indicates if the layout is changed via the arrows
resize
type: boolean
description: indicates if the layout is changed via resizing
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel