OOUI/Widgets/Icônes, indicateurs et étiquettes

Les widgets de type icône et indicateur contiennent de petits dessins (de la taille d'un texte normal) qui représentent efficacement une information permettant d'aider les utilisateurs à comprendre et à interagir avec une interface.

Les étiquettes sont aussi utilisées pour aider à identifier les composants des interfaces. La valeur d'une étiquette peut être une chaîne de caractères, un nœud de libellés ou une fonction qui les renvoie.

Icônes

La bibliothèque OOUI [$url contient plus de 100 icônes] pouvant être utilisées par les objets IconWidget pour créer de petits éléments graphiques et gérer des événements. Les objets IconWidget sont rarement utilisés sans étiquette, bien que cette dernière puisse être omise si on commence par un espace (par exemple dans une barre d'outils) ou si l'icône est utilisée dans un contexte où sa signification est évidente pour l'utilisateur. Dans ces cas, utilisez plutôt à la place un ButtonWidget silencieux (pouvant contenir lui-même un libellé et une icône).

Pour créer un IconWidget, utiliser un IconWidget avec un LabelWidget (voir la démonstration directe de [$url1 IconWidget] et [$url2 LabelWidget]) :

// Créer un IconWidget avec étiquette. Les étiquettes doivent être utilisées sauf si un espace
// figure au début ou si la signification de l'icône dans son contexte est évidente.

// Créer une icône et une étiquette.
var removeIcon = new OO.ui.IconWidget( {
		icon: 'check',
		title: 'Check'
	} ),
	iconLabel = new OO.ui.LabelWidget( {
		label: 'Label the icon'
	} );
// ajouter l'icône et le libellé au DOM.
$( document.body ).append( removeIcon.$element, iconLabel.$element );

Les objets IconWidget supportent un nombre de méthodes qui peuvent être utilisées pour gérer les événements et pour obtenir (get) ou initialiser (set) la valeur des éléments contenus. Par exemple getIcon() renvoie le nom de l'icône; setIcon() reçoit soit le nom symbolique d'une icône ou une liste de noms d'icônes avec la langue pour clé et définit l'icône; enfin setIconTitle() définit le titre de l'icône. La liste complète des méthodes prises en charge ainsi que les options de configuration, sont décrites dans la [$url documentation du code] pour les objets IconWidget.

Il faut charger quelque part les styles associés avant de créer IconWidget, par exemple via le $2. Les modules nommés par le masque oojs-ui.styles.icons-*, par exemple oojs-ui.styles.icons-interactions pour l'icône de case à cocher. Les noms de groupe peuvent être trouvés sur la [$url1 page de démonstration] ou dans le code.

Indicateurs

Les indicateurs sont de petites icônes avec des cas d'utilisation très restreints :

• pour agir comme des éléments indicateurs à l'intérieur des widgets sur un écran dont la taille est limitée, par exemple pour indiquer une action 'clear' dans un SearchInputWidget.
• pour clarifier la fonction d'un élément de contrôle qui agit de manière particulière (une liste déroulante qui par exemple ouvre un menu au lieu de réaliser directement une action).

Les objets IndicatorWidget sont souvent utilisés par les autres widgets (tels que la saisie de texte, les listes déroulantes, les options décorées). Dans l'exemple suivant, un objet TextInputWidget utilise un indicateur pour aider à clarifier le fait que le champ est obligatoire :

// Exemple : utiliser un indicateur pour montrer l'état d'un élément.
var textInput = new OO.ui.TextInputWidget( {
		placeholder: 'This field is required',
		indicator: 'required'
	} );
$( document.body ).append( textInput.$element );

Les indicateurs suivants sont inclus dans la bibliothèque OOUI :

Méthodes pouvant être utilisées pour initialiser ou pour récupérer le titre de l'indicateur (respectivement setTitle() et getTitle()) ou pour obtenir le nom de l'indicateur (getIndicator()). La liste complète des méthodes prises en charge ainsi que les options de configuration, sont décrites dans la [$url documentation du code] pour IndicatorWidgets.

Etiquettes

Les étiquettes permettent d'identifier la fonction des éléments de l'interface. Chaque LabelWidget peut être configuré avec une option label initialisée avec une chaîne de caractères, un nœud de libellés, ou une fonction :

• chaîne de caractères : une chaîne textuelle à plat.
• nœud de libellés : sélection jQuery d'éléments. Une sélection jQuery est utilisée pour tout ce qui est différent d'un libellé textuel à plat, par exemple un libellé comprenant un lien ou une mise en forme spéciale comme une couleur grise ou des éléments graphiques supplémentaires.
• fonction : une fonction qui renverra une chaîne ultérieurement. Les fonctions sont utilisées dans les cas où la valeur du libellé n'est pas actuellement définie. Voir Etendre la bibliothèque pour plus d'informations.

// Exemples de LabelWidget
// un libellé textuel à plat et un libellé avec une sélection jQuery d'éléments.
var label1 = new OO.ui.LabelWidget( {
		label: 'This is a plaintext label'
	} )
	label2 = new OO.ui.LabelWidget( {
		label: $( '<a href="default.html">This is a label with a link</a>'  )
	} );
$( document.body ).append( label1.$element, '<br>', label2.$element );

La liste complète des méthodes prises en charge ainsi que les options de configuration, sont décrites dans la [$url documentation du code] pour les objets LabelWidget.