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.