How to use the Collapsible component

The Collapsible class is a container that displays a single display object that may be collapsed and expanded by clicking or tapping a header that appears above it.

⚠️ Beta Notice: This component is still quite new to Feathers UI. It was included in the latest release because it should be stable enough for production use. However, some APIs may go through minor changes in upcoming releases — based on feedback from developers like you. Learn more about Beta APIs.

The Basics

Start by creating a Collapsible control, giving it some text to display in the header, and add it to the the display list.

var collapsible = new Collapsible();
collapsible.text = "Collapsible";
addChild(collapsible);

The collapsible's content property is used to add a child to the container:

var content = new LayoutGroup();
var contentLayout = new VerticalLayout();
contentLayout.setPadding(50.0);
contentLayout.horizontalAlign = CENTER;
contentLayout.verticalAlign = MIDDLE;
content.layout = contentLayout;
content.addChild(new Label("The Content"));
collapsible.content = content;

Open or close the content

The content may be opened and closed by the user by clicking the header.

If you want to programmatically open or close the content, set the opened property.

collapsible.opened = true;

Styles

A number of styles may be customized on the header sub-component of a Collapsible component.

The default header sub-component in a Collapsible component is of type ToggleButton. However, the header is allowed to be any OpenFL dispaly object.

The header's appearance may be customized globally in a theme, or it may be customized outside of a theme on an specific, individual Collapsible.

See How to use the ToggleButton component for complete details about which styles are available for a toggle button header. If you use a different UI component as the header, refer the the appropriate styling documentation for that UI component instead.

Style the header globally

Use the Collapsible.CHILD_VARIANT_HEADER constant in a theme to provide a function that globally styles the header in all Collapsible components.

styleProvider.setStyleFunction(
    ToggleButton,
    Collapsible.CHILD_VARIANT_HEADER,
    setCollapsible_Header_Styles);

The function should use the following signature.

function setCollapsible_Header_Styles(button:ToggleButton):Void {
    // ... set styles here
}

Style the header in a specific Collapsible

The headerFactory property may be used to customize the creation of an individual button.

collapsible.headerFactory = () -> {
    var button = new ToggleButton();
    // ... set styles here
    return button;
};