OOUI/Elements
< OOUI
The most basic component of the OOUI[1] library is called an element (OO.ui.Element), which is an object that represents a rendering in the DOM[2] — a button or an icon, for example, or anything that is visible to a user.
Unlike widgets, plain elements usually do not have events connected to them and can't be interacted with.
Every OOUI element has an $element property, which is a jQuery selection of its rendered contents.
Note that OOUI uses the $ prefix for the names of all variables and properties that refer to jQuery selections of DOM elements.
The $element property is extremely useful, and is used, for example, when creating OOUI widgets and appending them to the DOM.
Example
// Create a <div></div> element object with the text “Sample Text“ and CSS class `sample`.
var e = new OO.ui.Element( {
text: 'Sample Text',
classes: [ 'sample' ]
} );
// Append the element to the DOM.
$( 'body' ).append( e.$element );
The resulting HTML will look like this:
<body>
<div class="sample">Sample Text</div>
</body>
Elements
- Draggable
- Draggable/en
- Draggable/fr
- Draggable/hu
- Draggable/ja
- Draggable/nan
- Draggable/nl
- Draggable/pl
- Flagged
- Flagged/en
- Flagged/fr
- Flagged/hu
- Flagged/nan
- Flagged/nl
- Groups
- Groups/en
- Groups/fr
- Groups/hu
- Groups/ja
- Groups/nl
- Lookup
- Lookup/en
- Lookup/en-gb
- Lookup/fr
- Lookup/hu
- Lookup/ja
- Lookup/nl
- de
- en
- fr
- hu
- id
- ja
- nl
- pl
- ru
References
OOUI is maintained by the Design System Team.
Get help:
|
