ForgeComponenten
nl

Componenten

j-Pin

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Een eenvoudige PIN maker.


Configuratie:

  • count {Number} een aantal PIN-inputs (default: 6)
  • required {Boolean} maakt het mogelijk om "verplicht" te zijn (default: false)
  • disabled {Boolean} kan deze controle ontbinden
  • hide {Boolean} schakelt het weergeven van cijfers (default: false)
  • mask {Boolean} schakelt de masker uit (default: true)
  • NEW exec {String} een weg naar function(pin)
  • NEW allowpaste {Boolean} maakt het mogelijk om de pin te pasten (default: true)

Goed om te weten:

  • Een input zonder waarde creëert een ruimte
  • Het verwachten van String

Methoden:

  • component.focus() richt zich op de eerste input

Gebruik het met <ui-component name="pin">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

example.html
<div style="padding:50px">
	<div style="width:200px">
		<div style="margin-bottom:5px">PIN 1</div>
		<ui-component name="pin" path="pinA" config="count:4"></ui-component>
	</div>
	<br />
	<div style="width:250px">
		<div style="margin-bottom:5px">PIN 2 (hide:true)</div>
		<ui-component name="pin" path="pinB" config="count:5;hide:true"></ui-component>
	</div>
	<br />
	<div style="width:300px">
		<div style="margin-bottom:5px">PIN 3 (visible)</div>
		<ui-component name="pin" path="pinC" config="count:6;mask:false"></ui-component>
	</div>
</div>