Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›UI Components

Introduction

  • Getting Started
  • Installation
  • Create a new project in…

    • Terminal / Command Line
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

    • Android
    • Electron
    • HashLink VM
    • iOS
    • Linux
    • macOS
    • Neko VM
    • Web
    • Windows
  • Introduction to OpenFL

UI Components

  • Intro to UI components
  • Alert
  • Application
  • AssetLoader
  • Button
  • ButtonBar
  • Callout
  • Check
  • ComboBox
  • DatePicker
  • HDividedBox / VDividedBox
  • Drawer
  • Form / FormItem
  • GridView
  • GroupListView
  • Header
  • HierarchicalItemRenderer
  • ItemRenderer
  • Label
  • LayoutGroup
  • LayoutGroupItemRenderer
  • ListView
  • NumericStepper
  • PageIndicator
  • PageNavigator
  • Panel
  • PopUpDatePicker
  • PopUpListView
  • HProgressBar / VProgressBar
  • Radio
  • RouterNavigator
  • HScrollBar / VScrollBar
  • ScrollContainer
  • HSlider / VSlider
  • StackNavigator
  • TabBar
  • TabNavigator
  • TextArea
  • TextCallout
  • TextInput
  • ToggleButton
  • ToggleSwitch
  • TreeGridView
  • TreeView

Layouts

  • Intro to Layouts
  • AnchorLayout
  • FlowRowsLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • TiledRowsLayout
  • TiledRowsListLayout
  • PagedTiledRowsListLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout
  • Layout Data
  • Custom layouts

Styles and Skins

  • Intro to skins
  • Common shape skins
  • Custom programmatic skins
  • Intro to themes
  • Create a custom theme

Animation

  • Navigator animated transitions
  • Custom navigator transitions

Custom UI Components

  • Custom UI components
  • Component lifecycle
  • Custom item renderers
  • Class-based item renderers

Miscellaneous

  • CLI commands
  • Collections
  • Focus management
  • haxedef options
  • Displaying pop-ups
  • Semantic versioning
  • Tool-tips
  • Cookbook
  • Install Prerelease Builds
Edit

How to use the HScrollBar and VScrollBar components

The HScrollBar and VScrollBar classes allow a user to select a numeric value in a specific range by dragging a thumb along the length of a track.

Live preview of the HScrollBar and VScrollBar components

The Basics

Generally, scroll bars are created automatically by any container that supports scrolling. When creating custom components that support scrolling, you should generally extend BaseScrollContainer.

Styles

The skins for the HScrollBar and VScrollBar components are divided into two main parts: the thumb and the track. The track may either fill the full length of the scroll bar, or it may be optionally divided in half — meeting at the center of the scroll bar's thumb.

Thumb

Style a scroll bar's thumb using the thumbSkin property. The following example sets it to a RectangleSkin instance.

var thumbSkin = new RectangleSkin();
thumbSkin.border = SolidColor(1.0, 0x999999);
thumbSkin.fill = SolidColor(0xcccccc);
thumbSkin.width = 32.0;
thumbSkin.height = 32.0;
scrollBar.thumbSkin = thumbSkin;

The border and fill properties of the RectangleSkin are used to adjust its appearance. They support a variety of values — from solid colors to gradients to bitmaps.

The scroll bar automatically calculates its preferred size based on the initial dimensions of its skins, so it's important to set a skin's width and height properties to appropriate values to use in this calculation.

See Skinning with common shapes for more details about how to use RectangleSkin with the LineStyle and FillStyle enums that change its border and fill appearance.

Track

Style a scroll bar's track using the trackSkin property. The following example sets it to a RectangleSkin instance.

var trackSkin = new RectangleSkin();
trackSkin.border = SolidColor(1.0, 0x999999);
trackSkin.fill = SolidColor(0xcccccc);
trackSkin.width = 120.0;
trackSkin.height = 32.0;
scrollBar.trackSkin = trackSkin;

By default, the trackSkin will fill the entire length of the scroll bar. In other words, it will fill the width of an HScrollBar, or it will fill the entire height of a VScrollBar.

To give the track different a appearance on each side of the thumb, set the optional secondaryTrackSkin.

var trackSkin = new RectangleSkin();
trackSkin.border = SolidColor(1.0, 0x999999);
trackSkin.fill = SolidColor(0xccccff);
trackSkin.width = 60.0;
trackSkin.height = 32.0;
scrollBar.trackSkin = trackSkin;

var secondaryTrackSkin = new RectangleSkin();
secondaryTrackSkin.border = SolidColor(1.0, 0x999999);
secondaryTrackSkin.fill = SolidColor(0xcccccc);
secondaryTrackSkin.width = 60.0;
secondaryTrackSkin.height = 32.0;
scrollBar.secondaryTrackSkin = secondaryTrackSkin;

On an HScrollBar, the trackSkin appears on the left side of the thumb, and the secondaryTrackSkin appears on the right side. On a VScrollBar, the trackSkin appears below the thumb, and the secondaryTrackSkin appears above the thumb.

Related Links

  • feathers.controls.HScrollBar API Documentation
  • feathers.controls.VScrollBar API Documentation
Last updated on 2/1/2022
← RouterNavigatorScrollContainer →
  • The Basics
  • Styles
    • Thumb
    • Track
  • Related Links
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Premium Support
Documentation
  • Getting Started
  • API Reference
  • Samples
    Github
  • Source Code
  • Issue Tracker
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
  • Mastodon
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2023 Bowler Hat LLC — Illustrations by unDraw.