Logo FluentUI

HighlightRectangle QML Type

An animated highlight indicator for ListView items. More...

Import Statement: import FluentUI.Controls 1.0

Properties

Detailed Description

HighlightRectangle provides a visual highlight that animates between items in a ListView. It displays an animated rectangle that tracks the current highlighted item, with configurable orientation and margins.

Usage Example

 import QtQuick
 import FluentUI.Controls

 ListView {
     model: myModel
     delegate: ItemDelegate { text: modelData }
     highlight: HighlightRectangle {
         target: listView
     }
 }

Property Documentation

bottomMargin : int

The bottom margin applied to the highlight rectangle.

highlight : bool

Whether the highlight animation is currently active. When true, the highlight rectangle is visible and animating; when false, it is hidden.

highlightSize : int

The size of the highlight indicator in the primary direction of movement. Controls the thickness of the highlight bar.

leftMargin : int

The left margin applied to the highlight rectangle.

orientation : Qt::Orientation

The orientation of the highlight animation. Defaults to Qt.Vertical. Set to Qt.Horizontal for horizontal ListViews.

rightMargin : int

The right margin applied to the highlight rectangle.

target : ListView

The ListView that this highlight indicator tracks. The highlight rectangle will animate to match the position and size of the ListView's current highlighted item.