Class: StackLayout

.ui.StackLayout(configopt)

new StackLayout(configopt)

StackLayouts contain a series of panel layouts. By default, only one panel is displayed at a time, though the stack layout can also be configured to show all contained panels, one after another, by setting the #continuous option to 'true'.

Parameters:
Name Type Attributes Description
config Object <optional>

Configuration options

Properties
Name Type Attributes Default Description
continuous boolean <optional>
 false

Show all panels, one after another. By default, only one panel is displayed at a time.
items Array.<OO.ui.Layout> <optional>

Panel layouts to add to the stack layout.
Mixes In:
Source:
Example
// A stack layout with two panels, configured to be displayed continously
    var myStack = new OO.ui.StackLayout( {
        items: [
            new OO.ui.PanelLayout( {
                $content: $( '<p>Panel One</p>' ),
                padded: true,
                framed: true
            } ),
            new OO.ui.PanelLayout( {
                $content: $( '<p>Panel Two</p>' ),
                padded: true,
                framed: true
            } )
        ],
        continuous: true
    } );
    $( 'body' ).append( myStack.$element );

Extends

Methods

addItems(items, indexopt)

Add panel layouts to the stack layout.

Panels will be added to the end of the stack layout array unless the optional index parameter specifies a different insertion point. Adding a panel that is already in the stack will move it to the end of the array or the point specified by the index.

Parameters:
Name Type Attributes Description
items Array.<OO.ui.Layout>

Panels to add
index number <optional>

Index of the insertion point
Source:

clearItems()

Clear all panels from the stack layout.

Cleared panels are detached from the DOM, not removed, so that they may be reused. To remove only a subset of panels, use the #removeItems method.

Source:
Fires:

focus()

Focus the panel layout

The default implementation just focuses the first focusable element in the panel

Inherited From:
Source:

getClosestScrollableElementContainer() → {HTMLElement}

Get closest scrollable container.

Inherited From:
Source:
Returns:

Closest scrollable container

Type
HTMLElement

getCurrentItem() → {OO.ui.Layout|null}

Get the current panel.

Source:
Returns:
Type
OO.ui.Layout | null

getData() → {Mixed}

Get element data.

Inherited From:
Source:
Returns:

Element data

Type
Mixed

getElementDocument() → {HTMLDocument}

Get the DOM document.

Inherited From:
Source:
Returns:

Document object

Type
HTMLDocument

getElementGroup() → {OO.ui.mixin.GroupElement|null}

Get group element is in.

Inherited From:
Source:
Returns:

Group element, null if none

Type
OO.ui.mixin.GroupElement | null

getElementId() → {string}

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

Inherited From:
Source:
Returns:
Type
string

getElementWindow() → {Window}

Get the DOM window.

Inherited From:
Source:
Returns:

Window object

Type
Window

getTagName() → {string}

Get the HTML tag name.

Override this method to base the result on instance information.

Inherited From:
Source:
Returns:

HTML tag name

Type
string

isElementAttached() → {boolean}

Check if the element is attached to the DOM

Inherited From:
Source:
Returns:

The element is attached to the DOM

Type
boolean

isVisible() → {boolean}

Check if element is visible.

Inherited From:
Source:
Returns:

element is visible

Type
boolean

onScroll(e)

Handle scroll events from the layout element

Parameters:
Name Type Description
e jQuery.Event
Source:
Fires:

removeItems(items)

Remove the specified panels from the stack layout.

Removed panels are detached from the DOM, not removed, so that they may be reused. To remove all panels, you may wish to use the #clearItems method instead.

Parameters:
Name Type Description
items Array.<OO.ui.Layout>

Panels to remove
Source:
Fires:

(protected) restorePreInfuseState(state)

Restore the pre-infusion dynamic state for this widget.

This method is called after #$element has been inserted into DOM. The parameter is the return value of #gatherPreInfuseState.

Parameters:
Name Type Description
state Object
Inherited From:
Source:

scrollElementIntoView(configopt) → {jQuery.Promise}

Scroll element into view.

Parameters:
Name Type Attributes Description
config Object <optional>

Configuration options
Inherited From:
Source:
Returns:

Promise which resolves when the scroll is complete

Type
jQuery.Promise

setData(data)

Set element data.

Parameters:
Name Type Description
data Mixed

Element data
Inherited From:
Source:

setElementGroup(group)

Set group element is in.

Parameters:
Name Type Description
group OO.ui.mixin.GroupElement | null

Group element, null if none
Inherited From:
Source:

setElementId(id)

Set the element has an 'id' attribute.

Parameters:
Name Type Description
id string
Inherited From:
Source:

setItem(item)

Show the specified panel.

If another panel is currently displayed, it will be hidden.

Parameters:
Name Type Description
item OO.ui.Layout

Panel to show
Source:
Fires:

supports(methods) → {boolean}

Check if element supports one or more methods.

Parameters:
Name Type Description
methods string | Array.<string>

Method or list of methods to check
Inherited From:
Source:
Returns:

All methods are supported

Type
boolean

toggle(showopt)

Toggle visibility of an element.

Parameters:
Name Type Attributes Description
show boolean <optional>

Make element visible, omit to toggle visibility
Inherited From:
Source:
Fires:
  • event:visible

updateThemeClasses()

Update the theme-provided classes.

Inherited From:
Source: