Text-Field & Input

Text-field

  // Textfield - Text:  
  schema: { 
    ctrlShort: 'text',  // shorthand definition
    ctrl: { type:'text', ...} 
  }
  // Textfield - Password: 
  schema: { 
    ctrlShort: 'password',  // shorthand definition
    ctrl: { type:'password', ...} 
  }
  // Textfield - Email: 
  schema: { 
    ctrlShort: 'email',  // shorthand definition
    ctrl: { type:'email', ...} 
  }
  // Textfield - Number:
  schema: { 
    ctrlShort: 'number',  // shorthand definition
    ctrl: { type:'number', ...} 
  }  

Text Example

<v-text-field 
    label="Search"
    hint="Books" 
    prepend-icon="search"  
    clearable
/>

// Properties from <v-text-field> used in Schema
schema: { 
  myTextField: { 
    type:'text', 
    label:'Search', 
    hint:'Books', 
    prependIcon:'search', // camelcase -> 
    clearable:true 
  } 
}

Info to Vuetify-Textfield API

Example

Native HTML <Input> Type

Use different types for the HTML <input> element. Property ext in combination with type textmake the native HTML<input>Type accessable.

mySchema:{    
  range:{ 
    type:'text', 
    ext:'range' // <----- EXT
  },
  color:{ 
    type:'text', 
    ext:'color',
    prependIcon: 'palette', 
    label:'Color'
  },    
  date:{ 
    type:'text', 
    ext:'date', 
    locale:'en',
    prependIcon: 'event', 
    label:'Date'
  },
  time:{ 
    type:'text', 
    ext:'time', 
    format:'24h',
    prependIcon: 'timer', 
    label:'Time'
  }
}

Example

File-Input:

schema: { 
    ctrlShort: 'file',
    ctrl: { type:'file', ...}
}

Info to Vuetify File-Input

Textarea:

schema: { 
    ctrlShort: 'textarea',
    ctrl: { type:'textarea', ...}
}

Info to Vuetify Textarea