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

›Styles and Skins

Introduction

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

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

    Build a project targeting…

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

UI Components

  • Intro to UI components
  • ActivityIndicator
  • 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
  • FormLayout
  • 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

Skinning with common shapes

Feathers UI offers a number of built-in skin classes that draw common shapes using OpenFL's Graphics API. The border and fill of these skins may be easily customized with solid colors, gradients, and bitmaps. These skins automatically redraw themselves when resized or when the state of their parent component changes.

Skinning in Feathers UI is not limited to the classes described below. If you need something a little more powerful, consider subclassing the ProgrammaticSkin class and drawing you own custom graphics. Additionally, any OpenFL display object may be used as a skin, so you can use primitives like Bitmap or Sprite, if you prefer.

Shape skins

  • CircleSkin renders as a circle.
  • DonutSkin renders as a circle with its center cut out.
  • EllipseSkin renders as an ellipse.
  • HorizontalLineSkin renders as a single horizontal line, which may be aligned to the top, middle, or bottom.
  • LeftAndRightBorderSkin renders as a rectangle, with the border on the left and right edges only.
  • PillSkin renders similarly to a "pill", with semi-circle "caps" on the edges of a rectangle in the center.
  • RectangleSkin renders as a rectangle or square, with optional rounded corners.
  • TabSkin renders as a tab, which is a rectangle with two rounded corners along the same edge.
  • TopAndBottomBorderSkin renders as a rectangle, with the border on the top and bottom edges only.
  • TriangleSkin renders as a triangle, with the option to omit the border on one of its sides.
  • UnderlineSkin renders as a rectangle, with the border on the bottom edge only.
  • VerticalLineSkin renders as a single vertical line, which may be aligned to the left, center, or right.

Fill

The FillStyle enum is used to customize the shape's fill appearance.

  • SolidColor displays the fill as a solid color. Its parameters are passed to the Graphics.beginFill() method.
  • Gradient displays the fill as a gradient. Its parameters are passed to the Graphics.beginGradientFill() method.
  • Bitmap displays the fill using BitmapData. Its parameters are passed to the Graphics.beginBitmapFill() method.

Border

The LineStyle enum is used to customize the shape's border appearance.

  • SolidColor displays the border using a solid color. Its parameters are passed to the Graphics.lineStyle() method.
  • Gradient displays the border as a gradient. Its parameters are passed to the Graphics.lineGradientStyle() method.
  • Bitmap displays the border using BitmapData. Its parameters are passed to the Graphics.lineBitmapStyle() method.
Last updated on 3/7/2023
← Intro to skinsCustom programmatic skins →
  • Shape skins
  • Fill
  • Border
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.