How to use the SimpleScrollBar component (Starling version)
The SimpleScrollBar
component selects a numeric value in a specific range by dragging a thumb along an invisible track. A simple scroll bar may be displayed in either a horizontal or a vertical direction. This component is designed to be used with components that support scrolling, like ScrollContainer
and List
.
Additionally, Feathers offers a
ScrollBar
component.ScrollBar
is a desktop-style scroll bar that offers a thumb, track, and two buttons for adjusting the value by a small step.
The Basics
You can use the SimpleScrollBar
with a class like ScrollContainer
or List
by instantiating it in the horizontalScrollBarFactory
or the verticalScrollBarFactory
.
list.horizontalScrollBarFactory = function():IScrollBar
{
return new SimpleScrollBar();
}
The container will automatically handle setting properties like direction
, minimum
, maximum
, and step
, and it will automatically listen for Event.CHANGE
to know when the value
property changes.
If, for some reason, you want to use a
SimpleScrollBar
outside of a container, the values likeminimum
,maximum
,step
andvalue
that are normally handled by the container work similarly to the same properties on aSlider
component.
Skinning a SimpleScrollBar
The SimpleScrollBar
has one part that may be skinned, its thumb. A SimpleScrollBar's track is invisible. That's where the "simple" part comes from. For full details about what skin and style properties are available, see the SimpleScrollBar
API reference.
Skinning the Thumb
This section only explains how to access the thumb sub-component. Please read How to use the Button
component for full details about the skinning properties that are available on Button
components.
With a Theme
If you're creating a theme, you can target the SimpleScrollBar.DEFAULT_CHILD_STYLE_NAME_THUMB
style name.
getStyleProviderForClass( Button )
.setFunctionForStyleName( SimpleScrollBar.DEFAULT_CHILD_STYLE_NAME_THUMB, setScrollBarThumbStyles );
The styling function might look like this:
private function setScrollBarThumbStyles( thumb:Button ):void
{
var skin:ImageSkin = new ImageSkin( texture );
skin.scale9Grid = new Rectangle( 2, 3, 1, 6 );
thumb.defaultSkin = skin;
}
You can override the default style name to use a different one in your theme, if you prefer:
scrollBar.customThumbStyleName = "custom-thumb";
You can set the function for the customThumbStyleName
like this:
getStyleProviderForClass( Button )
.setFunctionForStyleName( "custom-thumb", setScrollBarCustomThumbStyles );
Without a Theme
If you are not using a theme, you can use thumbFactory
to provide skins for the scroll bar's thumb:
scrollBar.thumbFactory = function():Button
{
var thumb:Button = new Button();
//skin the thumb here, if not using a theme
var skin:ImageSkin = new ImageSkin( texture );
skin.scale9Grid = new Rectangle( 2, 3, 1, 6 );
thumb.defaultSkin = skin;
return thumb;
}