Components/Data displayIntroduced in 1.3.0

EDeferred Deferred

import EUI 1.0

Examples

Scroll into view

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Scroll down ↓") anchors.centerIn: parent } } EDeferred { y: 240 width: 300 height: 100 EText { padding: 20 text: qsTr("Loaded in viewport") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Repeated entry

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Scroll down ↓") anchors.centerIn: parent } } EDeferred { y: 240 width: 300 height: 100 once: false EText { padding: 20 text: qsTr("Loaded in viewport") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Once only

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Scroll down ↓") anchors.centerIn: parent } } EDeferred { y: 240 once: true width: 300 height: 100 EText { padding: 20 text: qsTr("Loaded in viewport") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Custom viewport

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Scroll down ↓") anchors.centerIn: parent } } EDeferred { y: 240 width: 300 height: 100 viewport: viewport EText { padding: 20 text: qsTr("Loaded in viewport") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Preload margin

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Scroll down ↓") anchors.centerIn: parent } } EDeferred { y: 240 margin: 80 width: 300 height: 100 EText { padding: 20 text: qsTr("Loaded in viewport") } } }

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

contentalias

Content Component instantiated after entering the viewport.

Defaultloader.sourceComponent

marginreal

Extra distance for preloading before viewport entry, in pixels.

Default0

oncebool

Retain content after its first load; false unloads it outside the viewport.

Defaulttrue

viewportItem

Optional viewport; ancestor clipping boundaries still apply.

Defaultnull

activatedbool

Whether deferred content has been activated.

Defaultfalse

asynchronousbool

Instantiate QML content asynchronously.

Defaultfalse

placeholderHeightreal

Height reserved before content is loaded.

Default120

itemaliasRead only

Currently loaded content instance; null before loading.

Defaultloader.item

statusintRead only

Underlying Loader status: Null, Ready, Loading, or Error.

"" / "success"
"warning" / "exception"

Defaultloader.status

inViewportboolRead only

Whether the control intersects the visible viewport.

DefaultintersectsViewport()

Signals

SignaturePurpose

exited()

Emitted when the component leaves the viewport.

loaded()

Emitted after deferred content is first loaded.

entered()

Emitted when the component enters the viewport.

Methods

SignaturePurpose

reset()

Restore the initial component state.