Components/EUI extensions

EFlexItem Flex item

import EUI 1.0

Examples

Weighted growth

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { grow: 1 basis: 80 ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { grow: 2 basis: 80 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Weighted shrink

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { shrink: 1 basis: 300 ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { shrink: 2 basis: 300 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Size constraints

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { grow: 1 basis: 80 minSize: 60 maxSize: 140 ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { grow: 1 basis: 80 minSize: 60 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Ordering

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { grow: 1 order: 2 basis: 80 ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { grow: 1 order: 1 basis: 80 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Per-item alignment

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFlex { gap: 12 width: 420 height: 140 EFlexItem { grow: 1 basis: 80 implicitHeight: 40 alignSelf: "center" ERectangle { radius: 6 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "A" color: "white" anchors.centerIn: parent } } } EFlexItem { grow: 1 basis: 80 alignSelf: "end" implicitHeight: 60 ERectangle { radius: 6 opacity: 0.65 anchors.fill: parent color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary) EText { text: "B" color: "white" anchors.centerIn: parent } } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

alignSelfstring

Cross-axis alignment override for this item.

"auto" / "start"
"center" / "end"
"stretch"

Default"auto"

basisreal

Base main-axis size; a negative value uses the content implicit size.

Default-1

contentalias

Default content slot; aliases button text in EFloatButton.

Defaultbody.data

flexItemboolRead only

Identifies an item that supplies flex layout parameters.

DefaultComputed

growreal

Growth weight for spare main-axis space; 0 prevents growth.

Default0

maxSizereal

Maximum allowed main-axis size; Infinity means no limit.

DefaultInfinity

minSizereal

Minimum allowed main-axis size.

Default0

orderint

Layout order; equal values preserve declaration order.

Default0

shrinkreal

Shrink weight multiplied by the base size; 0 prevents shrinking.

Default1