Mixin: FlaggedElement

.ui.mixin.FlaggedElement

The FlaggedElement class is an attribute mixin, meaning that it is used to add additional functionality to an element created by another class. The class provides a ‘flags’ property assigned the name (or an array of names) of styling flags, which are used to customize the look and feel of a widget to better describe its importance and functionality. The library currently contains the following styling flags for general use: - **progressive**: Progressive styling is applied to convey that the widget will move the user forward in a process. - **destructive**: Destructive styling is applied to convey that the widget will remove something. The flags affect the appearance of the buttons:
Source:

Example

// FlaggedElement is mixed into ButtonWidget to provide styling flags
    var button1 = new OO.ui.ButtonWidget( {
        label: 'Progressive',
        flags: 'progressive'
    } );
    var button2 = new OO.ui.ButtonWidget( {
        label: 'Destructive',
        flags: 'destructive'
    } );
    $( 'body' ).append( button1.$element, button2.$element );

ActionWidgets, which are a special kind of button that execute an action, use these flags: **primary** and **safe**.
Please see the [OOUI documentation on MediaWiki] [1] for more information.

[1]: https://www.mediawiki.org/wiki/OOUI/Elements/Flagged

Methods

clearFlags()

Clear all flags.
Source:
Fires:
  • event:flag

getFlags() → {Array.<string>}

Get the names of all flags set.
Source:
Returns:
Flag names
Type
Array.<string>

hasFlag(flag) → {boolean}

Check if the specified flag is set.
Parameters:
Name Type Description
flag string Name of flag
Source:
Returns:
The flag is set
Type
boolean

setFlaggedElement($flagged)

Set the flagged element. This method is used to retarget a flagged mixin so that its functionality applies to the specified element. If an element is already set, the method will remove the mixin’s effect on that element.
Parameters:
Name Type Description
$flagged jQuery Element that should be flagged
Source:

setFlags(flags)

Add one or more flags.
Parameters:
Name Type Description
flags string | Array.<string> | Object.<string, boolean> A flag name, an array of flag names, or an object keyed by flag name with a boolean value that indicates whether the flag should be added (`true`) or removed (`false`).
Source:
Fires:
  • event:flag