Components/Basic components

ESpace Space

import EUI 1.0

Examples

Pair gaps, wrapping and spacers

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESpace { wrap: true spacer: "·" size: [20, 14] width: parent.width EButton { text: "Design" } EButton { text: "Components" } EButton { text: "Interaction" } EButton { text: "Accessibility" } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Space

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESpace { size: 16 EButton { text: "One" } EButton { text: "Two" } }

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

alignmentstring

Alignment of items along the cross axis.

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

Default"center"

contentalias

Content slot; declare QML child objects directly inside the component.

DefaultAlias: body.data

directionvar

Layout direction of the child items.

Qt.Horizontal / Qt.Vertical
"horizontal" / "vertical"

DefaultQt.Horizontal

enabledbool

Allow interaction; false disables the control.

Defaulttrue

fillbool

Make space-container children fill the available space.

Defaultfalse

fillRatioreal

Percentage of available width occupied by children in fill mode.

Default100

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

layoutHeightreal

Explicit layout height; 0 computes it from content.

Default0

sizevar

Spacing between child items.

Non-negative number
"small" / "default" / "large"
[horizontal gap, vertical gap]

Default12

spacervar

Separator text or Component between children.

Text or Component

Default""

spacingreal

Gap between content, columns, rows or text in pixels.

DefaultDynamic binding

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

wrapbool

Allow content to wrap when space is insufficient.

Defaulttrue

flowintRead only

Whether space uses wrapping layout.

DefaultComputed at runtime

horizontalboolRead only

Whether the resolved layout is horizontal or vertical.

DefaultComputed at runtime

horizontalGaprealRead only

Actual horizontal or vertical layout gap.

DefaultComputed at runtime

positionsvarRead only

Positions computed from child dimensions and layout rules.

DefaultComputed at runtime

verticalGaprealRead only

Actual horizontal or vertical layout gap.

DefaultComputed at runtime