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 [OOjs UI documentation on MediaWiki] [1] for more information.

[1]: https://www.mediawiki.org/wiki/OOjs_UI/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