UI/Frame Types/Spinner

Spinner

A Spinner Frame using TeamResourceSpinnerTemplate as template

Spinner provides a control where an user can pick a number from a range, clicking the buttons increases or decreases that number value.

Structure

A Spinner contains an Image frame used as the background of the frame Value which is displayed through a Label frame. It also features two buttons to raise or lower the Value, called IncrementButton and DecrementButton.

Ideally a Spinner Should have set its Minimum and Maximum properties, which set the range Value can hold.

Properties

Spinner inherits from Control and shares all of its properties. Additionally it has got:

MinorStep

The increase/decrease factor on the Value of a Spinner.

MajorStep

The maximum increase/decrease factor on the Value of a Spinner.

Minimum

The minimum possible Value on a Spinner.

Maximum

The maximum number that can be used as a UI/Frame Properties/Value under a UI/Frame Types/Control

Value

A property that can store a number under some types of Control. Can be changed by the end user through a control interactable component.

Insets

The margins used to display a text within a EditBox, Spinner and Button

Image

An Image frame generally used by controls as its visual representation or itas background shape.

Label

An Label frame generally used by controls to explain what the control is for, or in some case, the text content, like in EditBox and Spinner

IncrementButton

A Button frame used to decrement the Value on a Spinner

DecrementButton

The maximum increase/decrease factor on the Value of a Spinner.

Example

    <Frame type="Spinner" name="TeamResourceSpinnerTemplate">
        <Insets top="0" left="15" bottom="0" right="15"/>
        <Width val="120"/>
        <Height val="48"/>
        <MinorStep val="2"/>
        <MajorStep val="4"/>
        <Minimum val="100"/>
        <Maximum val="0"/>
        <Value val="1"/>
        <Image val="StandardBackground"/>
        <Label val="StandardGlueSpinnerLabel"/>
        <IncrementButton val="StandardIncrementButton"/>
        <DecrementButton val="StandardDecrementButton"/>
        <CollapseLayout val="true"/>
        
        <Frame type="Image" name="StandardBackground">
            <Texture val="@UI/TeamResourceSpinnerBackground" layer="0"/>
            <TextureType val="Border" layer="0"/>
            <LayerColor val="##TeamResourcePanelBorderColor"/>
            <DescFlags val="Internal"/>
        </Frame>
        
        <Frame type="Button" name="StandardIncrementButton">
            <NormalImage val="NormalImage"/>
            <HoverImage val="HoverImage"/>
            <Width val="20"/>
            <DescFlags val="Internal"/>

            <Frame type="Image" name="NormalImage">
                <LayerCount val="3"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowNormal" layer="0"/>              
                <StateCount val="2" layer="0"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="1"/>
                <LayerVisible val="false" layer="1"/>                
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="2"/>
                <LayerVisible val="false" layer="2"/>                
                <DescFlags val="Internal"/>
            </Frame>

            <Frame type="Image" name="HoverImage">
                <LayerCount val="3"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowNormal" layer="0"/>
                <StateCount val="2" layer="0"/>                
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="1"/>
                <LayerVisible val="false" layer="1"/>                
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="2"/>
                <LayerVisible val="false" layer="2"/>                
                <DescFlags val="Internal"/>
            </Frame>
        </Frame>

        <Frame type="Button" name="StandardDecrementButton">
            <NormalImage val="NormalImage"/>
            <HoverImage val="HoverImage"/>
            <Width val="20"/>
            <DescFlags val="Internal"/>

            <Frame type="Image" name="NormalImage">
                <LayerCount val="3"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowNormal" layer="0"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="0"/>
                <StateCount val="2" layer="0"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="1"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="1"/>
                <LayerVisible val="false" layer="1"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="2"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="2"/>
                <LayerVisible val="false" layer="2"/>
                <DescFlags val="Internal"/>
            </Frame>

            <Frame type="Image" name="HoverImage">
                <LayerCount val="3"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowNormal" layer="0"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="0"/>
                <StateCount val="2" layer="0"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="1"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="1"/>
                <LayerVisible val="false" layer="1"/>
                <Texture val="@@UI/TeamResourceSpinnerArrowHover" layer="2"/>
                <TextureCoords top="1.0" left="0.0" bottom="0.0" right="1.0" layer="2"/>
                <LayerVisible val="false" layer="2"/>
                <DescFlags val="Internal"/>
            </Frame>
        </Frame>

        <Frame type="Label" name="StandardGlueSpinnerLabel">
            <Style val="TeamResourceValue"/>
            <DescFlags val="Internal"/>
        </Frame>
    </Frame>