agorum.textInput

Dieses Widget stellt ein einzeiliges Eingabefeld dar. Sie können damit Eingabefelder erstellen. Über einen vordefinierten Style kann ein Eingabefeld auch als Suchfeld kenntlich gemacht werden.

Verwendung

 

 

let aguila = require('common/aguila');

let widget = aguila.create({
  width: 300,
  height: 300,
  type: 'agorum.vbox',
  title: 'agorum.textInput- Beispiel',
  items: [     
    {
      type: 'agorum.textInput',
      name: 'usernameField',
      label: 'Benutzername',
      value: '',
      placeholder: 'user@domain'
    }
  ]
});

let usernameField = widget.down('usernameField');

usernameField.on('valueChanged', value => {
  log.value = value;
});

widget;

Events

keine

Parameter

password (Boolean)

Wert	Beschreibung
true	Verschleiert den eingegebenen Text durch schwarze Punkte.
false (Standard)	Stellt den eingegebenen Text normal dar.

Beispiel

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  width: 300,
  items: [
    {
      type: 'agorum.textInput',
      name: 'passwordField',
      label: 'Password',
      password: true,
    },
  ],
});

widget;

 

cls (String)

Setzt die hier definierte CSS-Klasse clientseitig auf die Widget-Komponente.

Sie können die vordefinierte CSS-Klasse search-input verwenden, um das Eingabefeld mit abgerundeten Ecken anzuzeigen und das Feld so als Suchfeld erkennbar zu machen:

let widget = aguila.create({
  type: 'agorum.vbox',
 
  items: [
    {
      type: 'agorum.textInput',
      cls: 'search-input',
    },
  ],
});

widget;

 

Funktionen

keine