Updating the XUI Rollup Bar

XUI has had a rollup component for some time, however the rollup was limited to showing one component at a time (apart from during animated transitions). In many cases it would be useful to show several of the rollup's panels at once and therefore the XRollupBar has been extended to allow both of these modes.

Stacking the buttons

Stacking the buttons for the rollup, as shown above however isn't very efficient in terms of space usage particularly for the horizontal and therefore a stacking mode has been added. In the stacking mode the buttons for the hidden panels can be collapsed to share the same divider.

Videos

• Vertical Accordian [0]
• Vertical Accordian [0]
• Horizontal Rollup [0]

The button for an open panel always show the associated button at the top or left of its divider as otherwise the movement of buttons can become confusing. With the open panel's button always at the top/left of the divider it is clear which panel the button refers to. Colour coded icons also reflect the change of state and these can be customized for different colour schemes.

In the above examples the stacking is limited to 4 items per divider. When one divider is full a new divider is added for any additional buttons. At some point this limit should probably be driven by the length of text in the buttons so that the number of buttons can be adapted to the available space and so that the layout can adapt better to the window size.

So where to next?

To complete the component some extra methods are needed to allow the component to be used outside of a fixed sized layout (in the examples the rollup is within a border layout). For example within a docking/sliding setup the rollup might slide out progressively as each panel is revealed.

A further enhancement would be to allow the dividers to be dragged and thereby allow customization of the space.