Skip to content

Commit 8d87042

Browse files
Abdelaziz18003Abdelaziz18003
committed
update form components
1 parent 33bc9ab commit 8d87042

File tree

2 files changed

+230
-227
lines changed

2 files changed

+230
-227
lines changed

‎snippets/html-snippets.json‎

Lines changed: 135 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,141 @@
321321
],
322322
"description": "The QExpansionItem component allows the hiding of content that is not immediately relevant to the user. Think of them as accordion elements that expand when clicked on. It’s also known as a collapsible."
323323
},
324+
"QInput": {
325+
"prefix": "qinput",
326+
"body": [
327+
"<q-input v-model=\"${1:text}\" type=\"${2:text}\" label=\"${3:Label}\" />$0"
328+
],
329+
"description": "The QInput component is used to capture text input from the user. It uses v-model, similar to a regular input. It has support for errors and validation, and comes in a variety of styles, colors, and types."
330+
},
331+
"QSelect": {
332+
"prefix": "qselect",
333+
"body": [
334+
"<q-select v-model=\"${1:model}\" :options=\"${2:options}\" label=\"${3:Standard}\" ${4:filled} />"
335+
],
336+
"description": "The QSelect component has two types of selection: single or multiple. This component opens up a menu for the selection list and action. A filter can also be used for longer lists."
337+
},
338+
"QForm": {
339+
"prefix": "qform",
340+
"body": [
341+
"<q-form",
342+
"\t@submit=\"${1:onSubmit}\"",
343+
"\t@reset=\"${2:onReset}\"",
344+
"\tclass=\"q-gutter-md\"",
345+
">",
346+
"\t$0",
347+
"\t<div>",
348+
"\t\t<q-btn label=\"${3:Submit}\" type=\"submit\" color=\"primary\"/>",
349+
"\t\t<q-btn label=\"${4:Reset}\" type=\"reset\" color=\"primary\" flat class=\"q-ml-sm\" />",
350+
"\t</div>",
351+
"</q-form>"
352+
],
353+
"description": "The QForm component renders a <form> DOM element and allows you to easily validate child form components (like QInput, QSelect or your QField wrapped components) that have the internal validation (NOT the external one) through rules associated with them."
354+
},
355+
"QField": {
356+
"prefix": "qfield",
357+
"body": [
358+
"<q-field ${1:rounded} ${2:filled} label=\"${3:Rounded filled}\" ${4:stack-label}>",
359+
"\t$0",
360+
"</q-field>"
361+
],
362+
"description": "The QField component is used to provide common functionality and aspect to form components. It uses :value (or v-model if you want to use clearable property) to have knowledge of the model of the component inside. It has support for labels, hints, errors, validation, and comes in a variety of styles and colors."
363+
},
364+
"QRadio": {
365+
"prefix": "qradio",
366+
"body": [
367+
"<q-radio v-model=\"${1:shape}\" val=\"${2:line}\" label=\"${3:Line}\" />"
368+
],
369+
"description": "The QRadio component is another basic element for user input. You can use this to supply a way for the user to pick an option from multiple choices."
370+
},
371+
"QCheckbox": {
372+
"prefix": "qcheckbox",
373+
"body": [
374+
"<q-checkbox ${1:left-label} v-model=\"${2:orange}\" label=\"${3:Orange}\" />"
375+
],
376+
"description": "The QCheckbox component is another basic element for user input. You can use this to supply a way for the user to toggle an option."
377+
},
378+
"QToggle": {
379+
"prefix": "qtoggle",
380+
"body": [
381+
"<q-toggle v-model=\"${1:value}\" color=\"${2:green}\" />"
382+
],
383+
"description": "The QToggle component is another basic element for user input. You can use this for turning settings, features or true/false inputs on and off."
384+
},
385+
"QBtnToggle": {
386+
"prefix": "qbtntoggle",
387+
"body": [
388+
"<q-btn-toggle",
389+
"\tv-model=\"${1:model}\"",
390+
"\ttoggle-color=\"${2:primary}\"",
391+
"\t:options=\"[",
392+
"\t\t{label: '${3:One}', value: '${4:one}'},",
393+
"\t\t{label: '${5:Two}', value: '${6:two}'},",
394+
"\t\t{label: '${7:Three}', value: '${8:three}'}",
395+
"\t]\"",
396+
"/>"
397+
],
398+
"description": "The QBtnToggle component is another basic element for user input, similar to QRadio but with buttons. You can use this to supply a way for the user to pick an option from multiple choices."
399+
},
400+
"QOptionGroup": {
401+
"prefix": "qoptiongroup",
402+
"body": [
403+
"<q-option-group",
404+
"\tv-model=\"${1:group}\"",
405+
"\ttype=\"${2:checkbox}\"",
406+
"\tcolor=\"${3:secondary}\"",
407+
"\t:options=\"${4:options}\"",
408+
"/>"
409+
],
410+
"description": "The QOptionGroup component is a helper component that allows you better control for grouping binary (on or off, true or false, 1 or 0) form input components like checkboxes, radios or toggles. A good use for this component is for offering a set of options or settings to turn on and off."
411+
},
412+
"QSlider": {
413+
"prefix": "qslider",
414+
"body": [
415+
"<q-slider",
416+
"\tv-model=\"${1:model}\"",
417+
"\t:min=\"${2:1}\"",
418+
"\t:max=\"${3:7}\"",
419+
"\t:step=\"${4:2}\"",
420+
"\tcolor=\"${5:green}\"",
421+
"/>"
422+
],
423+
"description": "The QSlider is a great way for the user to specify a number value between a minimum and maximum value, with optional steps between valid values."
424+
},
425+
"QRange": {
426+
"prefix": "qrange",
427+
"body": [
428+
"<q-range",
429+
"\tv-model=\"${1:rangeValues}\"",
430+
"\t:min=\"${2:0}\"",
431+
"\t:max=\"${3:10}\"",
432+
"\t:step=\"${4:1}\"",
433+
"\tcolor=\"${5:green}\"",
434+
"/>"
435+
],
436+
"description": "Range component is a great way to offer the user the selection of a sub-range of values between a minimum and maximum value, with optional steps to select those values"
437+
},
438+
"QTime": {
439+
"prefix": "qtime",
440+
"body": [
441+
"<q-time",
442+
"\tv-model=\"${1:timeWithSeconds}\"",
443+
"\t${2:with-seconds}",
444+
"/>"
445+
],
446+
"description": "The QTime component provides a method to input time."
447+
},
448+
"QDate": {
449+
"prefix": "qdate",
450+
"body": [
451+
"<q-date",
452+
"\tv-model=\"${1:date}\"",
453+
"\t${2:landscape}",
454+
"\t${3:minimal}",
455+
"/>"
456+
],
457+
"description": "The QDate component provides a method to input date. Currently it supports Gregorian (default) and Persian calendars."
458+
},
324459
"QToolbar": {
325460
"prefix": "qtoolbar",
326461
"body": [
@@ -400,46 +535,6 @@
400535
],
401536
"description": "The Quasar Pagination component is available for whenever a pagination system is required. It offers the user a simple UI to help you in moving between pages/items."
402537
},
403-
"QForm": {
404-
"prefix": "qform",
405-
"body": [
406-
"<q-form",
407-
"\t@submit=\"${1:onSubmit}\"",
408-
"\t@reset=\"${2:onReset}\"",
409-
"\tclass=\"q-gutter-md\"",
410-
">",
411-
"\t$0",
412-
"\t<div>",
413-
"\t\t<q-btn label=\"${3:Submit}\" type=\"submit\" color=\"primary\"/>",
414-
"\t\t<q-btn label=\"${4:Reset}\" type=\"reset\" color=\"primary\" flat class=\"q-ml-sm\" />",
415-
"\t</div>",
416-
"</q-form>"
417-
],
418-
"description": "The QForm component renders a <form> DOM element and allows you to easily validate child form components (like QInput, QSelect or your QField wrapped components) that have the internal validation (NOT the external one) through rules associated with them."
419-
},
420-
"QField": {
421-
"prefix": "qfield",
422-
"body": [
423-
"<q-field",
424-
"\ticon=\"${1:cloud}\"",
425-
"\tlabel=\"${2:Your Gmail}\"",
426-
"\thelper=\"${3:Helper}\"",
427-
"\t:error=\"${4:mailHasError}\"",
428-
"\terror-label=\"${5:We need a valid email}\"",
429-
"\t:count=\"${6:10}\"",
430-
">",
431-
"\t$0",
432-
"</q-field>"
433-
],
434-
"description": "A component that allows to easily build responsive Forms UI by wrapping each Form component (QInput, QSelect and so on) to enrich it with a main label, an icon, error placeholder and error state, helper placeholder and/or item/character counter."
435-
},
436-
"QInput": {
437-
"prefix": "qinput",
438-
"body": [
439-
"<q-input v-model=\"${1:text}\" type=\"${2:text}\" float-label=\"${3:Float Label}\" placeholder=\"${4:Gigi}\" />$0"
440-
],
441-
"description": "A component that can be used for regular text input, passwords, email addresses, numbers, telephone numbers, urls and auto-growing text areas."
442-
},
443538
"QChipsInput": {
444539
"prefix": "qchipsinput",
445540
"body": [
@@ -465,98 +560,6 @@
465560
],
466561
"description": "A component that offers the user an input field with additional features for searching purposes."
467562
},
468-
"QSlider": {
469-
"prefix": "qslider",
470-
"body": [
471-
"<q-slider v-model=\"${1:selectedValue}\" :min=\"${2:1}\" :max=\"${3:7}\" :step=\"${4:2}\" />"
472-
],
473-
"description": "Slider component is a great way to make the user specify a number value between a minimum and maximum value, with optional steps between valid values"
474-
},
475-
"QRange": {
476-
"prefix": "qrange",
477-
"body": [
478-
"<q-range v-model=\"${1:rangeValues}\" :min=\"${2:0}\" :max=\"${3:10}\" :step=\"${4:1}\" />"
479-
],
480-
"description": "Range component is a great way to offer the user the selection of a sub-range of values between a minimum and maximum value, with optional steps to select those values"
481-
},
482-
"QRadio": {
483-
"prefix": "qradio",
484-
"body": [
485-
"<q-radio v-model=\"${1:option}\" val=\"${2:opt1}\" label=\"${3:Option 1}\" />"
486-
],
487-
"description": "The Quasar Radio component is another basic element for user input. You can use this to supply a way for the user to pick an option from multiple choices."
488-
},
489-
"QCheckbox": {
490-
"prefix": "qcheckbox",
491-
"body": [
492-
"<q-checkbox v-model=\"${1:selection}\" val=\"${2:one}\" label=\"${3:One}\" />"
493-
],
494-
"description": "The Quasar Checkbox component is a basic element to be used for selection or toggling by the user."
495-
},
496-
"QToggle": {
497-
"prefix": "qtoggle",
498-
"body": [
499-
"<q-toggle v-model=\"${1:selection}\" val=\"${2:one}\" label=\"${3:One}\" />"
500-
],
501-
"description": "The Quasar Toggle component is another basic element for user input. You can use this for turning settings, features or true/ false inputs on and off."
502-
},
503-
"QBtnToggle": {
504-
"prefix": "qbtntoggle",
505-
"body": [
506-
"<q-btn-toggle",
507-
"\tv-model=\"${1:model}\"",
508-
"\ttoggle-color=\"${2:primary}\"",
509-
"\t:options=\"[",
510-
"\t\t{label: '${3:One}', value: '${4:one}'},",
511-
"\t\t{label: '${5:Two}', value: '${6:two}'},",
512-
"\t\t{label: '${7:Three}', value: '${8:three}'}",
513-
"\t]\"",
514-
"/>"
515-
],
516-
"description": "The QBtnToggle component is another basic element for user input, similar to QRadio but with buttons. You can use this to supply a way for the user to pick an option from multiple choices."
517-
},
518-
"QOptionGroup": {
519-
"prefix": "qoptiongroup",
520-
"body": [
521-
"<q-option-group",
522-
"\tcolor=\"${1:secondary}\"",
523-
"\ttype=\"${2:checkbox}\"",
524-
"\tv-model=\"${3:group}\"",
525-
"\t:options=\"[",
526-
"\t\t{ label: '${4:Option 1}', value: '${5:op1}' },",
527-
"\t\t{ label: '${6:Option 2}', value: '${7:op2}' },",
528-
"\t\t{ label: '${8:Option 3}', value: '${9:op3}' }",
529-
"\t]\"",
530-
"/>"
531-
],
532-
"description": "The Quasar Option Group component is a helper component, which allows you to better control the grouping of binary (as in on or off, true or false, 1 or 0) form input components like checkboxes, radios or toggles."
533-
},
534-
"QDatetime": {
535-
"prefix": "qdatetime",
536-
"body": [
537-
"<q-datetime v-model=\"${1:model}\" type=\"${2:datetime}\" />"
538-
],
539-
"description": "The Datetime component provides a method to input dates and time or both."
540-
},
541-
"QDatetimePicker": {
542-
"prefix": "qdatetimepicker",
543-
"body": [
544-
"<q-datetime-picker v-model=\"${1:model}\" type=\"${2:datetime}\" />"
545-
],
546-
"description": "The DatetimePicker component provides a method to input dates and time or both."
547-
},
548-
"QSelect": {
549-
"prefix": "qselect",
550-
"body": [
551-
"<q-select",
552-
"\tv-model=\"${1:select}\"",
553-
"\tfloat-label=\"${2:Is Quasar Awesome?}\"",
554-
"\t${3:radio}",
555-
":options=\"${4:selectOptions}\"",
556-
"/>"
557-
],
558-
"description": "Select component has two types of selection: single selection (using Radios or Lists) or multiple selection (using Checkboxes or Toggles). This component opens up a Popover for the selection list and action. A filter can also be used for longer lists."
559-
},
560563
"QImg": {
561564
"prefix": "qimg",
562565
"body": [

0 commit comments

Comments
 (0)