OOUI/Widgets/Icônes, indicateurs et étiquettes
OOUI |
---|
Introduction |
Pour commencer |
Travailler avec les widgets |
Voir aussi |
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
.
the Design System Team assure la maintenance de OOUI.
Obtenir de l'aide :
|