TextFieldUI

This component provides for text type in.

Parameters

  • inputType?: “text” | “password” | “number” | “email” | “url” – there are various kinds of text field input each with its own type. If the inputType is omitted then “text” is used.
    • “text” – a simple text type in box.
    • “password” – same as “text” except that the content is obscured
    • “number” – text is restricted to numeric values
    • “email” – text typing modified for email addresses.
    • “url” – text typing modified for URL inputs.

Attributes

  • .getF( getFF: ()=>string ) – the getFF function returns the current value of the string to be edited.
  • .setF( setFF: (newVal:string)=>void) – the setFF function will be called when the user types something into the text field.
  • .placeHolder( phF: string | ()=>string ) – the placeholder is a string to be displayed whenever the text field is empty. This is a hint to the user. If phF is a string then that is used. If it is a function then the function is called for the placeholder on every render.
  • .readonly(readonly:true) – if this is set to true then the button will be displayed but inactive and non-responsive. The default is false. This is for displaying a stylistically consistent but inactive user interface.

Examples

let name:string = null;
new TextFieldUI()
     .getF(()=>{ return name; })
     .setF((newName:string)=> { name=newName; } )
     .placeHolder("new name");

Styling

  • InputUI – the default styling.