ERow Grid

import EUI 1.0

Examples

Responsive grid and alignment

QML sourceQML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

ERow {
    gutter: [12, 12]
    width: parent.width
    viewportWidth: width

ECol {
        md: 8
        sm: 12
        xs: 24
        height: 56

ERectangle {
            radius: 8
            color: "#409eff"
            anchors.fill: parent

EText {
                color: "white"
                anchors.centerIn: parent
                text: "xs 24 / sm 12 / md 8"
            }
        }
    }
    ECol {
        md: 8
        sm: 12
        xs: 24
        height: 56

ERectangle {
            radius: 8
            color: "#67c23a"
            anchors.fill: parent

EText {
                color: "white"
                anchors.centerIn: parent
                text: "Responsive column"
            }
        }
    }
    ECol {
        md: 8
        sm: 24
        xs: 24
        height: 56

ERectangle {
            radius: 8
            color: "#909399"
            anchors.fill: parent

EText {
                color: "white"
                anchors.centerIn: parent
                text: "Responsive column"
            }
        }
    }
}

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Grid

QML sourceQML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

ERow {
    gutter: 16
    height: 64
    width: parent.width

ECol {
        span: 8
        height: parent.height

ERectangle {
            radius: 4
            border.width: 1
            anchors.fill: parent
            color: EPaletteManager.BasePalette.transparent
            border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark)

EText {
                font.pixelSize: 14
                anchors.centerIn: parent
                text: "8 / 24"
                color: EPaletteManager.ThemePalette.textRegular(ETheme.dark)
            }
        }
    }
    ECol {
        span: 16
        height: parent.height

EText {
                font.pixelSize: 14
                anchors.centerIn: parent
                text: "16 / 24"
                color: EPaletteManager.ThemePalette.textRegular(ETheme.dark)
            }
        }
    }
}

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

alignstring

Cross-axis alignment of the row items.

"top" / "middle"
"bottom"

Default"top"

enabledbool

Allow interaction; false disables the control.

Defaulttrue

guttervar

Grid gutter as a number or [horizontal, vertical] gaps in pixels.

Default0

heightreal

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

DefaultimplicitHeight

justifystring

Distribution of items along the main axis.

"start" / "end"
"center" / "space-between"
"space-around" / "space-evenly"

Default"start"

viewportWidthreal

Viewport width used to evaluate responsive breakpoints, in pixels.

DefaultWindow.window ? Window.window.width : width

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultDynamic binding

horizontalGutterrealRead only

Actual horizontal or vertical layout gap.

DefaultComputed at runtime

positionsvarRead only

Positions computed from child dimensions and layout rules.

DefaultComputed at runtime

verticalGutterrealRead only

Actual horizontal or vertical layout gap.

DefaultComputed at runtime

ERow Grid ​

Examples ​

Responsive grid and alignment ​

Grid ​

Properties ​

ERow Grid

Examples

Responsive grid and alignment

Grid

Properties