- Using the Library
- Using the Themes
- Using the Demo App
- Donut Chart
- Funnel Chart
- Linear Gauges
- Menu and MenuBar
- Radial Gauge
A button designed to display an icon and its label using a flyout animation.
Creating the IconButton
Extends the Button class. Can be added to any container that implements IVisualElementContainer.
Using the IconButton
The label is set via the "label" property, like a vanilla Button. However, the label for an IconButton is not displayed until the button is moused over.
Set the direction the label flies out via the "flyoutDirection" property. If the flyout will overflow the screen, the direction will be automatically flipped.
Removing the Flyout Label
The flyout label can be removed instantly by calling removeFlyoutLabel();
If the IconButton is removed from the stage, the flyout label will also be removed immediately to prevent a situation where the IconButton is on the stage but the flyout label is still on the stage and visible.
However, if an IconButton's visibility changes, the flyout label's visibility will not change automatically. For example, assume that an IconButton is inside a Viewstack and the visible child changes which causes the IconButton to no longer be visible. If this occurs while the flyout label is visible, the flyout label will remain visible since it is parented by the SystemManager. This behavior is typically not desired.
Plan ahead if your application will hide an IconButton while it may be moused over. This is especially relevant if clicks on an IconButton trigger visibility changes.
<buttons:IconButton id="ib" click="ib.visible=false;ib.removeFlyoutLabel();"/>
Included are 2 default skins: a black (or white) background that changes to white (or black) on rollOver. The icon is colorized via the ColorTransform filter to either black or white depending on the skin.
Note that for custom skins, the SparkButtonSkin class is not necessary because the custom layout contained within the SparkButtonSkin is not used or desired. Use a plain Skin or SparkSkin class. If a SparkButtonSkin is used, the IconButton will disable automatic icon management in the skin and remove the displayLabel skin part automatically.
Animations & Effects
The flyout animation is hardwired and is a Parallel effect of a Move and a Fade animation. The duration of the animation and the amount the label "flies out" is controlled by the "duration" and "flyoutDistance" properties.
Accessibility mirrors that of the Spark Button class.
Dispatched when the flyout label has finished animating in and is displayed.
Dispatched when the flyout label has finished animating out and has been removed.
Icon offset along the x axis.
Icon offset along the y axis.
The alpha applied to the background of the flyout label.
The color applied to the background of the flyout label.
The color applied to the flyout label color.
Themes & Skinning
Two skins are provided for a white and black background for the Spark theme.
See the IconButton application for example code.Back To Top