Components/Visual effects

EBorderBeam Border beam

import EUI 1.0

Examples

Moving border

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { height: 96 width: 420 ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EText { anchors.centerIn: parent text: qsTr("Project Alpha") } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Multiple beams

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { count: 3 size: 70 height: 96 width: 420 ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EText { anchors.centerIn: parent text: qsTr("Project Alpha") } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Gradient and speed

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { height: 96 width: 420 duration: 3 color: [{ "color": "#3267e8", "percent": 0 }, { "color": "#b65cff", "percent": 100 }] ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EText { anchors.centerIn: parent text: qsTr("Project Alpha") } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Outset and stroke

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { outset: 3 height: 96 radius: 16 width: 420 lineWidth: 3 ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EText { anchors.centerIn: parent text: qsTr("Project Alpha") } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Motion controls

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBorderBeam { id: beam height: 96 width: 420 running: false ERectangle { radius: 12 border.width: 1 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceComponent(ETheme.dark) border.color: EPaletteManager.ThemePalette.borderDefault(ETheme.dark) } EButton { anchors.centerIn: parent text: qsTr("Save") onClicked: beam.running = !beam.running } }

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

beamCountintRead only

Clamped beam count.

DefaultComputed

beamSizerealRead only

Validated beam length.

DefaultComputed

colorvar

Solid color or gradient used for the border beam.

Single color or gradient array
Stop fields: color, percent
percent: 0–100

DefaultEPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)

contentalias

Default content slot; aliases button text in EFloatButton.

Defaultbody.data

countint

Number of beams distributed evenly along the border.

Effective value is clamped to 1–64

Default1

durationreal

Duration of a full loop in seconds.

Default6

expansionrealRead only

Validated outward expansion.

DefaultComputed

lineWidthreal

Beam stroke width in pixels; 0 disables drawing.

Default2

outsetreal

Outward expansion of the border path in pixels.

Default0

radiusreal

Path corner radius, capped at half the frame dimensions.

Default8

reducedMotionbool

Disable decorative rendering and animation.

Defaultfalse

runningbool

Animate the beam; false preserves the current frame.

Defaulttrue

sizereal

Beam length in pixels.

Default100

stopsvarRead only

Validated color stops sorted by position.

DefaultComputed

strokeWidthrealRead only

Validated stroke width.

DefaultComputed