Ui XML HScroll - funovus/editor-wiki GitHub Wiki
Table of Contents
- [Ui XML Reference\HScroll](#ui-xml-referencehscroll)
* [inertia](#inertia)
* [decelerationRate](#decelerationrate)
* [reverse](#reverse)
* [contentAlignment](#contentalignment)
|
Ui XML Reference\HScroll
A scrollable frame that stacks children frames horizontally. By default, this frame type attempts to fill its parent size unless given explicit dimensions. To set padding and spacing for the child frames, the child frames should be placed in a ScrollContent element. Unlike the Trigger API version, placing the child frames directly under the HScroll itself (omitting the ScrollContent) will still work.
<HScroll height="120" width="450" backgroundImage="frame01_blue">
<ScrollContent spacing="10" padding="10">
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
</ScrollContent>
</HScroll>
This XML produces the following UI:
A scrollable frame that stacks children frames horizontally
Value type: boolean
Supports data binding
The inertia status of the HScroll frame, where true
is enabled and false
is disabled. Inertia is set to true
by default. Inertia causes the scroll frame's scrolling to slow by the given deceleration rate, to a stop, after the mouse is released. If inertia is disabled the frame does not continue scrolling after the mouse is released.
<HScroll height="120" width="300" backgroundImage="frame01_blue" inertia="false">
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
</HScroll>
Value type: number
Supports data binding
The deceleration rate for the inertia, if enabled. A value of 0 will cause instant deceleration (equivalent to setting the inertia to false). Values between 0 and 1 will cause deceleration. A value of 1 will cause no deceleration. A value greater than 1 will cause acceleration. A negative value will break the scroll element.
<HScroll height="120" width="300" backgroundImage="frame01_blue" decelerationRate="0.5">
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
</HScroll>
HScroll deceleration from the above example usage:
Value type: boolean
Supports data binding
The reverse status of the HScroll frame, where true
reverses the order in which child frames are added (the last created frame will be the first frame displayed) and false
displays child frames normally.
<HScroll height="120" width="300" backgroundImage="frame01_blue" reverse="true">
<Frame height="80" width="80" backgroundImage="cart" />
<Frame height="90" width="90" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="110" width="110" backgroundImage="cart" />
<Frame height="120" width="120" backgroundImage="cart" />
</HScroll>
Value type: string
Supports data binding
The content alignment of the HScroll frame. This value determines where the initial display location of the scroll content is. Options are left
(default) and right
.
<HScroll height="120" width="300" backgroundImage="frame01_blue" contentAlignment="right">
<Frame height="80" width="80" backgroundImage="cart" />
<Frame height="90" width="90" backgroundImage="cart" />
<Frame height="100" width="100" backgroundImage="cart" />
<Frame height="110" width="110" backgroundImage="cart" />
<Frame height="120" width="120" backgroundImage="cart" />
</HScroll>