Class: ActionFieldLayout

.ui.ActionFieldLayout(fieldWidget, buttonWidget, config)

new ActionFieldLayout(fieldWidget, buttonWidget, config)

ActionFieldLayouts are used with OO.ui.FieldsetLayout. The layout consists of a field-widget, a button, and an optional label and/or help text. The field-widget (e.g., a TextInputWidget), is required and is specified before any optional configuration settings. Labels can be aligned in one of four ways: - **left**: The label is placed before the field-widget and aligned with the left margin. A left-alignment is used for forms with many fields. - **right**: The label is placed before the field-widget and aligned to the right margin. A right-alignment is used for long but familiar forms which users tab through, verifying the current field with a quick glance at the label. - **top**: The label is placed above the field-widget. A top-alignment is used for brief forms that users fill out from top to bottom. - **inline**: The label is placed after the field-widget and aligned to the left. An inline-alignment is best used with checkboxes or radio buttons. Help text is accessed via a help icon that appears in the upper right corner of the rendered field layout when help text is specified.
Parameters:
Name Type Description
fieldWidget OO.ui.Widget Field widget
buttonWidget OO.ui.ButtonWidget Button widget
config Object
Source:
Example
// Example of an ActionFieldLayout
    var actionFieldLayout = new OO.ui.ActionFieldLayout(
        new OO.ui.TextInputWidget( {
            placeholder: 'Field widget'
        } ),
        new OO.ui.ButtonWidget( {
            label: 'Button'
        } ),
        {
            label: 'An ActionFieldLayout. This label is aligned top',
            align: 'top',
            help: 'This is help text'
        }
    );

    $( 'body' ).append( actionFieldLayout.$element );

Extends

Methods

(protected) formatTitleWithAccessKey(title) → {string}

Include information about the widget's accessKey in our title. TitledElement calls this method. (This is a bit of a hack.)
Parameters:
Name Type Description
title string Tooltip label for 'title' attribute
Inherited From:
Source:
Returns:
Type
string

getClosestScrollableElementContainer() → {HTMLElement}

Get closest scrollable container.
Inherited From:
Source:
Returns:
Closest scrollable container
Type
HTMLElement

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

getField() → {OO.ui.Widget}

Get the widget contained by the field.
Inherited From:
Source:
Returns:
Field widget
Type
OO.ui.Widget

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

isFieldInline() → {boolean}

Return `true` if the given field widget can be used with `'inline'` alignment (see #setAlignment). Return `false` if it can't or if this can't be determined.
Inherited From:
Source:
Returns:
Type
boolean

isVisible() → {boolean}

Check if element is visible.
Inherited From:
Source:
Returns:
element is visible
Type
boolean

(protected) makeMessage(kind, text) → {jQuery}

Parameters:
Name Type Description
kind string 'error' or 'notice'
text string | OO.ui.HtmlSnippet
Inherited From:
Source:
Returns:
Type
jQuery

(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:

setErrors(errors)

Set the list of error messages.
Parameters:
Name Type Description
errors Array Error messages about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Inherited From:
Source:

setNotices(notices)

Set the list of notice messages.
Parameters:
Name Type Description
notices Array Notices about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Inherited From:
Source:

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: