Skip to main content

Bar

An element used to adjust the size or position of the app screen within the display, or to manipulate content.​

Bar.svg

States​

StateValueDescription
VariantLight / DarkSwitches based on the type defined by the app
DraggingTrue / FalseChanges to 'True' when it is a draggable window
DisabledTrue / FalseIf True, the handle is hidden and the drag cannot be controlled
PressedTrue / FalseThe state when the handle is grabbed and dragging begins

Types​

TypesDescription
Window barA component for adjusting the app's window size
Scroll barA component for navigating the app's content

Window bar​

WindowBar_Anatomy.svg

1. Root : The top-level container area that wraps the window bar component
2. Control : The container area that wraps the handle and the minimum drag area
3. Handle : A control element that can be dragged

Behaviors​

WindowBar_Light.svg
WindowBar_Dark.svg


Scroll bar​

ScrollBar_Anatomy.svg

1. Root : The top-level container area that wraps the scroll bar component
2. Control : The container area that wraps the handle and the minimum drag area
3. Handle : A control element that can be dragged

Behaviors​

ScrollBar_Light.svg
ScrollBar_Dark.svg