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.

Related Links

• Live Demo: Shape Skins Story Explorer