OOUI/Elements/Flagged

From MediaWiki.org
< OOUI‎ | Elements
Jump to navigation Jump to search

The OO.ui.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 customize the look and feel of a widget to better describe its importance and functionality.

When an element is configured with a flags property, its CSS styling is updated. A widget that is configured to be ‘destructive’, for example, will be styled with the ‘oo-ui-flaggedElement-destructive’ CSS class.

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 whatever process they are in.
  • destructive: Destructive styling is applied to convey that the widget will remove something.

Please see Buttons and Switches for an example of these flags.

Actions, which are a special kind of button used in process dialogs, use these flags:

  • primary: The primary action (e.g., ‘save’ or ‘done’) moves the user forward in whatever process they are in. The primary action is the most important widget in the user interface, and its positioning –in the upper right corner of the dialog window– reflects this.
  • safe: The safe action (e.g., ‘Cancel’) will make no changes. ‘Safe’ actions are usually configured without an action. Actions widgets that have no configured action will close the window without making changes.

Please see the documentation on action sets for more information about how the primary and safe flags are used.

For a full list of supported methods and configuration options provided by the FlaggedElement class, please see the code-level documentation.