Overslaan naar hoofdinhoud

Number Input

Een aantal invoercomponenten. Kan worden gebruikt als onderdeel van een ISLE-dashboard of stand-alone. In het laatste geval wilt u wijzigingen verwerken via het on-Change attribuut of de waarde binden aan een globale variabele via het bind attribuut.

Opties#

  • bind | string: naam van de globale variabele voor het toe te kennen nummer. Default: ''.
  • defaultValue | number: waarde die de standaardwaarde van de invoer bij het opstarten aangeeft. Default: 0.
  • disabled | boolean: boolean die aangeeft of de ingang actief is of niet. Default: false.
  • inline | boolean: geeft aan of de invoer inline wordt weergegeven. Default: false.
  • legend | (string|node): tekenreeks die de tekst aangeeft die naast het ingevoerde nummer wordt weergegeven. Default: none.
  • max | number: getal dat de maximumwaarde aangeeft die mag worden ingevoerd. Default: null.
  • min | number: getal dat de kleinst mogelijke waarde aangeeft die kan worden ingevoegd. Default: null.
  • numbersOnly | boolean: controleert of alleen getallen worden geaccepteerd. Default: true.
  • onBlur | function: terugbelfunctie die moet worden ingeroepen bij gebruik van een waasmethode. Default: onBlur() {}.
  • onChange | function: terugbelfunctie die moet worden aangeroepen wanneer de nummerinvoer wordt gewijzigd. Default: onChange() {}.
  • onKeyDown | function: terugbelfunctie die moet worden aangeroepen wanneer een toets wordt ingedrukt. Default: onKeyDown() {}.
  • onKeyPress | function: terugbelfunctie die moet worden aangeroepen bij het invoeren van een willekeurige toets. Default: onKeyPress() {}.
  • onKeyUp | function: terugbelfunctie die moet worden aangeroepen wanneer de toets wordt losgelaten. Default: onKeyUp() {}.
  • step | (number|string): nummer dat de stapsgewijze veranderingen aangeeft bij gebruik van de stapsgewijze pijlen. Default: 1.
  • style | object: CSS inline-stijlen. Default: {}.
  • inputStyle | object: CSS inline stijlen voor invoerelement. Default: {}.
  • value | number: getalwaarde (voor gecontroleerde component). Default: none.
  • tooltip | string: tooltip string (indien niet ingesteld, wordt de tooltip automatisch gegenereerd). Default: none.
  • tooltipPlacement | string: richting van de tooltip. Default: 'left'.

Voorbeelden#

Live redacteur
Resultaat
Laatst bijgewerkt{datum}{doorGebruiker}