Components/Data display

ESkeleton Skeleton

import EUI 1.0

Examples

Multiple skeletons, throttled visibility and loaded content

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width ESwitch { checked: true text: qsTr("Loading") onToggled: skeleton.loading = checked } ESkeleton { id: skeleton rows: 2 count: 2 animated: true width: Math.min(480, parent.width) throttle: ({ leading: 250, trailing: 150 }) EText { height: 80 width: parent.width wrapMode: Text.WordWrap text: qsTr("Loaded. Content height follows the actual content when the loading state changes.") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Skeleton

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESkeleton { rows: 3 loading: true animated: true EText { text: qsTr("Loading complete") } }

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

animatedbool

Enable skeleton animation.

Defaultfalse

contentalias

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

DefaultAlias: loadedContent.data

countint

Skeleton instance count or current item count, depending on the component.

Default1

enabledbool

Allow interaction; false disables the control.

Defaulttrue

heightreal

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

DefaultimplicitHeight

loadingbool

Whether the component is loading.

Defaulttrue

rowsint

Text rows or skeleton rows.

Default3

templateDelegateComponent

Component slot for custom skeleton template; null uses the default content. See this page’s examples for delegate context.

Defaultnull

throttlevar

Delay, throttling or automatic close time in milliseconds; 0 means no delay or no timed close.

Milliseconds or object:
leading, trailing, initVal

Default0

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultimplicitWidth

displayedLoadingboolRead only

Skeleton loading state after delay and throttling.

DefaultComputed at runtime