PopUpButton

Overview

The PopUpButton component combines both a basic button and a popup button that opens and displays content when clicked. It is designed to deliver similar functionality to the Halo PopUpButton, while supporting the Spark skinning architecture.

Creating the PopUpButton component

The PopUpButton extends the Flex SkinnableContainer class, which means that it can be added to any container that implements IVisualElementContainer.

Using the PopUpButton component

The primary button functions as a normal button and dispatches normal button events. For example, only the primary button dispatches "click" events. Use the "label" property to change the text displayed in the primary button.

The popup button will open popup content by default. Popup content is set via the "popUp" property. It can also be declared inline in MXML like child content of a container.

For example:

<popUpButton:PopUpButton>
	<s:List>
		<s:ArrayCollection>
			<fx:String>Selection A</fx:String>
			<fx:String>Selection B</fx:String>
			<fx:String>Selection C</fx:String>
		</s:ArrayCollection>
	</s:List>
</popUpButton:PopUpButton>

This example would open a List as the popup content.

By default, popups are closed when the window is resized or a click occurs outside of the popup. To disable automatic closing, use the "closeOnActivity" property.

Accessibility

Field can be tabbed to and the primary button can be CLICKED via the SPACE key when focused.

Default Property

Default is the "popUp" property.

Halo Menu

A Halo Menu can not be added as "popUp" content. This is due to the fact that a Halo Menu handles opening/closing itself which is redundant with the PopUpButton class.

Selected Custom Events

CLOSE
ardisia.components.popUpButton.events.PopUpButtonEvent
Dispatched when the popUp is closed.

OPEN
ardisia.components.popUpButton.events.PopUpButtonEvent
Dispatched when the popUp opens and is visible.

Themes & Skinning

Skins are included for the Spark, London, and Stockholm themes.

Example

See the PopUpButton demo application for example code.

Back To Top