OOUI/Widgets/Icons, Indicators, and Labels/nl
| OOUI |
|---|
| Introductie |
| Aan de slag |
| Met widgets werken |
| Zie ook |
Pictogram- en indicatorwidgets bevatten kleine afbeeldingen (ongeveer zo groot als normale tekst) die efficiënt informatie overbrengen om gebruikers te helpen communiceren met en begrijpen van een interface.
Labels worden ook gebruikt om interfacecomponenten te identificeren. De waarde van een label kan worden ingesteld op een tekenreeks, een labelnode of een functie die ze retourneert.
Pictogrammen
De OOUI-bibliotheek bevat meer dan 100 pictogrammen die door IconWidgets kunnen worden gebruikt om kleine grafische elementen te maken die gebeurtenissen afhandelen.
Een IconWidgets mag zelden zonder label worden gebruikt, hoewel een label kan worden weggelaten als de ruimte beperkt is (bijvoorbeeld in een werkbalk) of als het pictogram wordt gebruikt in een context waarin de betekenis ervan heel duidelijk is voor de gebruiker.
Overweeg in deze gevallen het gebruik van een stille ButtonWidget in plaats daarvan (die zelf een label en pictogram kan bevatten).
Als u een IconWidget wilt maken, gebruikt u een IconWidget met een LabelWidget (IconWidget & LabelWidget live demo):
// Maak een IconWidget en label aan. Labels moeten worden gebruikt, tenzij er ruimte is
// is op een premium of de betekenis van het pictogram in zijn context is heel duidelijk.
// Maak een pictogram en een label aan.
var removeIcon = new OO.ui.IconWidget( {
icon: 'check',
title: 'Check'
} ),
iconLabel = new OO.ui.LabelWidget( {
label: 'Label the icon'
} );
// Voeg het pictogram en het label toe aan de DOM.
$( document.body ).append( removeIcon.$element, iconLabel.$element );
Een IconWidgets ondersteunt een aantal methoden die kunnen worden gebruikt om gebeurtenissen af te handelen en om de waarde van ingesloten elementen op te halen of in te stellen.
getIcon() retourneert bijvoorbeeld de naam van het pictogram;setIcon(), dat een symbolische pictogramnaam of een kaart met pictogramnamen per taal gebruikt, stelt het pictogram in; en <setIconTitle() stelt de pictogramtitel in.
Voor een volledige lijst met ondersteunde methoden en configuratieopties, zie de code-level documentatie voor de IconWidgets.
U moet eerst de gerelateerde stijlen laden voordat u een IconWidget maakt, bijvoorbeeld via ResourceLoader.
Modules genoemd door masker oojs-ui.styles.icons-*, bijvoorbeeld oojs-ui.styles.icons-interactions voor check icon.
Groepsnamen zijn te vinden in demopagina of in code.
Indicatoren
Indicatoren zijn kleine pictogrammen met zeer beperkte gebruikssituaties:
- Om te fungeren als het aangeven van elementen binnen widgets op beperkte schermruimte, bijvoorbeeld om een 'clear' actie in een SearchInputWidget aan te geven.
- Om de functie te verduidelijken van een besturingselement dat op een uitzonderlijke manier werkt (voorbeeldː een vervolgkeuzemenu dat een menu opent in plaats van een actie rechtstreeks uit te voeren).
Een IndicatorWidgets wordt vaak gebruikt door andere widgets (bijv. Tekstinvoer, vervolgkeuzelijsten, opgemaakte opties).
In het volgende voorbeeld gebruikt een TextInputWidget een indicator om duidelijk te maken dat het veld vereist is:
// Voorbeeld: een indicator gebruiken om de status van een element weer te geven.
var textInput = new OO.ui.TextInputWidget( {
placeholder: 'This field is required',
indicator: 'required'
} );
$( document.body ).append( textInput.$element );
De volgende indicatoren zijn opgenomen in de OOUI-bibliotheek:
Methoden kunnen worden gebruikt om de indicatortitel (respectievelijk setTitle() en getTitle()) in te stellen of op te halen of om de naam van de indicator (getIndicator()) op te halen.
Voor een volledige lijst met ondersteunde methoden en configuratieopties, zie de code-level documentatie over IndicatorWidgets.
Labels
Labels helpen bij het identificeren van de functie van interface-elementen.
Elke LabelWidget kan worden geconfigureerd met een label-optie die is ingesteld op een tekenreeks, een labelnode of een functie:
- String: een gewone tekenreeks
- Label Node: een jQuery selectie van elementen. Een jQuery-selectie wordt gebruikt voor iets anders dan een label met platte tekst, bijvoorbeeld een label met een koppeling of een speciale stijl, zoals een grijze kleur of extra grafische elementen.
- Function: een functie die in de toekomst een string zal produceren. Functies worden gebruikt in gevallen waarin de labelwaarde nu niet is gedefinieerd. Zie 'Extending the Library' voor meer informatie.
// Voorbeelden van LabelWidgets
// Een label met platte tekst en een label met een jQuery-selectie van elementen.
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 );
Voor een volledige lijst met ondersteunde methoden en configuratieopties, zie de code-level documentatie over LabelWidgets.
 | OOUI wordt onderhouden door the Design System Team.
Hulp krijgen:
|
