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: