Skip to content

Commit 02667a0

Browse files
Abdelaziz18003Abdelaziz18003
committed
update components from QIcon to QKnob
1 parent 8d87042 commit 02667a0

File tree

2 files changed

+100
-76
lines changed

2 files changed

+100
-76
lines changed

‎snippets/html-snippets.json‎

Lines changed: 61 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -456,6 +456,67 @@
456456
],
457457
"description": "The QDate component provides a method to input date. Currently it supports Gregorian (default) and Persian calendars."
458458
},
459+
"QIcon": {
460+
"prefix": "qicon",
461+
"body": [
462+
"<q-icon name=\"${1:print}\" />"
463+
],
464+
"description": "The QIcon component allows you to easily insert icons within other components or any other area of your pages."
465+
},
466+
"QImg": {
467+
"prefix": "qimg",
468+
"body": [
469+
"<q-img",
470+
"\t:src=\"${1:https://placeimg.com/500/300/nature}\"",
471+
"\t:ratio=\"${2:16/9}\"",
472+
"\tspinner-color=\"${3:primary}\"",
473+
"\tspinner-size=\"${4:82px}\"",
474+
"/>"
475+
],
476+
"description": "The QImg component makes working with images (any picture format) easy and also adds a nice loading effect to it along with many other features (example: the ability to set an aspect ratio)."
477+
},
478+
"QInfiniteScroll": {
479+
"prefix": "qinfinitescroll",
480+
"body": [
481+
"<q-infinite-scroll @load=\"onLoad\" :offset=\"250\">",
482+
"\t<div v-for=\"(item, index) in items\" :key=\"index\" class=\"caption\">",
483+
"\t\t<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>",
484+
"\t</div>",
485+
"\t<template v-slot:loading>",
486+
"\t\t<div class=\"row justify-center q-my-md\">",
487+
"\t\t\t<q-spinner-dots color=\"primary\" size=\"40px\" />",
488+
"\t\t</div>",
489+
"\t</template>",
490+
"</q-infinite-scroll>"
491+
],
492+
"description": "The QInfiteScroll component allows you to load new content as the user scrolls the page."
493+
},
494+
"QInnerLoading": {
495+
"prefix": "qinnerloading",
496+
"body": [
497+
"<q-inner-loading :showing=\"${1:visible}\">",
498+
"\t<q-spinner-gears size=\"${2:50px}\" color=\"${3:primary}\" />",
499+
"</q-inner-loading>"
500+
],
501+
"description": "The QInnerLoading component allows you to add a progress animation within a component. Much like the Loading Plugin, it’s purpose is to offer visual confirmation to the user that some process is happening in the background, which takes an excessive amount of time."
502+
},
503+
"QKnob": {
504+
"prefix": "qknob",
505+
"body": [
506+
"<q-knob",
507+
"\t:min=\"${1:5}\"",
508+
"\t:max=\"${2:10}\"",
509+
"\tv-model=\"${3:value1}\"",
510+
"\t${4:show-value}",
511+
"\tsize=\"${5:50px}\"",
512+
"\t:thickness=\"${6:0.22}\"",
513+
"\tcolor=\"${7:teal}\"",
514+
"\ttrack-color=\"${8:grey-3}\"",
515+
"\tclass=\"${9:q-ma-md}\"",
516+
"/>"
517+
],
518+
"description": "The QKnob component is used to take a number input from the user through mouse/touch panning. It is based on QCircularProgress and inherits all its properties and behavior."
519+
},
459520
"QToolbar": {
460521
"prefix": "qtoolbar",
461522
"body": [
@@ -560,37 +621,13 @@
560621
],
561622
"description": "A component that offers the user an input field with additional features for searching purposes."
562623
},
563-
"QImg": {
564-
"prefix": "qimg",
565-
"body": [
566-
"<q-img",
567-
"\t:src=\"${1:https://placeimg.com/500/300/nature}\"",
568-
"\t:ratio=\"${2:16/9}\"",
569-
"\tspinner-color=\"${3:primary}\"",
570-
"\tspinner-size=\"${4:82px}\"",
571-
"/>"
572-
],
573-
"description": "The QImg component makes working with images (any picture format) easy and also adds a nice loading effect to it along with many other features (example: the ability to set an aspect ratio)."
574-
},
575624
"QRating": {
576625
"prefix": "qrating",
577626
"body": [
578627
"<q-rating v-model=\"${1:ratingModel}\" :max=\"${2:3}\" />"
579628
],
580629
"description": "Quasar Rating is a Component which allows users to rate items, usually known as “Star Rating”."
581630
},
582-
"QKnob": {
583-
"prefix": "qknob",
584-
"body": [
585-
"<q-knob",
586-
"\tv-model=\"${1:model}\"",
587-
"\t:min=\"${2:min}\"",
588-
"\t:max=\"${3:max}\"",
589-
"\t:placeholder=\"${4:'$ ' + model}\"",
590-
"/>"
591-
],
592-
"description": "Quasar Knob is another way of making the user select a Number value from a predefined range. With optional steps included."
593-
},
594631
"QUploader": {
595632
"prefix": "quploader",
596633
"body": [
@@ -801,15 +838,6 @@
801838
],
802839
"description": "QPopupProxy should be used when you need either a QMenu (on bigger screens) or a QDialog (on smaller screens) to be displayed. It acts as a proxy which picks either of the two components to use. QPopupProxy also handles context-menus."
803840
},
804-
"QInnerLoading": {
805-
"prefix": "qinnerloading",
806-
"body": [
807-
"<q-inner-loading :visible=\"${1:visible}\">",
808-
"\t<q-spinner-gears size=\"${2:50px}\" color=\"${3:primary}\"></q-spinner-gears>",
809-
"</q-inner-loading>"
810-
],
811-
"description": "The QInnerLoading component allows you to add a progress animation within a component."
812-
},
813841
"QProgress": {
814842
"prefix": "qprogress",
815843
"body": [
@@ -855,18 +883,6 @@
855883
],
856884
"description": "QScrollObservable is a Quasar component that emits a scroll event whenever the user scrolls the page or overflowed container with .scroll CSS class applied to it."
857885
},
858-
"QInfiniteScroll": {
859-
"prefix": "qinfinitescroll",
860-
"body": [
861-
"<q-infinite-scroll :handler=\"${1:loadMore}\">",
862-
"\t<div v-for=\"${2:item} in ${3:items}\">",
863-
"\t\t$0",
864-
"\t</div>",
865-
"\t<q-spinner-dots slot=\"message\" :size=\"40\"></q-spinner-dots>",
866-
"</q-infinite-scroll>"
867-
],
868-
"description": "When you want to progressively load new content as the user scrolls down your Page, use QInfiniteScroll component."
869-
},
870886
"QSeparator": {
871887
"prefix": "qseparator",
872888
"body": [

‎snippets/jade-snippets.json‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,45 @@
335335
],
336336
"description": "The QDate component provides a method to input date. Currently it supports Gregorian (default) and Persian calendars."
337337
},
338+
"QIcon": {
339+
"prefix": "qicon",
340+
"body": [
341+
"q-icon(name='${1:print}')"
342+
],
343+
"description": "The QIcon component allows you to easily insert icons within other components or any other area of your pages."
344+
},
345+
"QImg": {
346+
"prefix": "qimg",
347+
"body": [
348+
"q-img(:src='${1:https://placeimg.com/500/300/nature}', :ratio='${2:16/9}', spinner-color='${3:primary}', spinner-size='${4:82px}')"
349+
],
350+
"description": "The QImg component makes working with images (any picture format) easy and also adds a nice loading effect to it along with many other features (example: the ability to set an aspect ratio)."
351+
},
352+
"QInfiniteScroll": {
353+
"prefix": "qinfinitescroll",
354+
"body": [
355+
"q-infinite-scroll(@load='onLoad', :offset='250')",
356+
"\t.caption(v-for='(item, index) in items', :key='index')",
357+
"\t\tp Lorem ipsum dolor sit amet consectetur adipisicing elit.",
358+
"\ttemplate(v-slot:loading)"
359+
],
360+
"description": "The QInfiteScroll component allows you to load new content as the user scrolls the page."
361+
},
362+
"QInnerLoading": {
363+
"prefix": "qinnerloading",
364+
"body": [
365+
"q-inner-loading(:showing='${1:visible}')",
366+
"\tq-spinner-gears(size='${2:50px}', color='${3:primary}')"
367+
],
368+
"description": "The QInnerLoading component allows you to add a progress animation within a component. Much like the Loading Plugin, it’s purpose is to offer visual confirmation to the user that some process is happening in the background, which takes an excessive amount of time."
369+
},
370+
"QKnob": {
371+
"prefix": "qknob",
372+
"body": [
373+
"q-knob.${9:q-ma-md}(:min='${1:5}', :max='${2:10}', v-model='${3:value1}', ${4:show-value}, size='${5:50px}', :thickness='${6:0.22}', color='${7:teal}', track-color='${8:grey-3}')"
374+
],
375+
"description": "The QKnob component is used to take a number input from the user through mouse/touch panning. It is based on QCircularProgress and inherits all its properties and behavior."
376+
},
338377
"QToolbar": {
339378
"prefix": "qtoolbar",
340379
"body": [
@@ -426,27 +465,13 @@
426465
],
427466
"description": "A component that offers the user an input field with additional features for searching purposes."
428467
},
429-
"QImg": {
430-
"prefix": "qimg",
431-
"body": [
432-
"q-img(:src='${1:https://placeimg.com/500/300/nature}', :ratio='${2:16/9}', spinner-color='${3:primary}', spinner-size='${4:82px}')"
433-
],
434-
"description": "The QImg component makes working with images (any picture format) easy and also adds a nice loading effect to it along with many other features (example: the ability to set an aspect ratio)."
435-
},
436468
"QRating": {
437469
"prefix": "qrating",
438470
"body": [
439471
"q-rating(v-model='${1:ratingModel}', :max='${2:3}')"
440472
],
441473
"description": "Quasar Rating is a Component which allows users to rate items, usually known as “Star Rating”."
442474
},
443-
"QKnob": {
444-
"prefix": "qknob",
445-
"body": [
446-
"q-knob(v-model='${1:model}', :min='${2:min}', :max='${3:max}', :placeholder='${4:'$ ' + model}')"
447-
],
448-
"description": "Quasar Knob is another way of making the user select a Number value from a predefined range. With optional steps included."
449-
},
450475
"QUploader": {
451476
"prefix": "quploader",
452477
"body": [
@@ -589,14 +614,6 @@
589614
],
590615
"description": "QPopupProxy should be used when you need either a QMenu (on bigger screens) or a QDialog (on smaller screens) to be displayed. It acts as a proxy which picks either of the two components to use. QPopupProxy also handles context-menus."
591616
},
592-
"QInnerLoading": {
593-
"prefix": "qinnerloading",
594-
"body": [
595-
"q-inner-loading(:visible='${1:visible}')",
596-
"\tq-spinner-gears(size='${2:50px}', color='${3:primary}')"
597-
],
598-
"description": "The QInnerLoading component allows you to add a progress animation within a component."
599-
},
600617
"QProgress": {
601618
"prefix": "qprogress",
602619
"body": [
@@ -636,15 +653,6 @@
636653
],
637654
"description": "QScrollObservable is a Quasar component that emits a scroll event whenever the user scrolls the page or overflowed container with .scroll CSS class applied to it."
638655
},
639-
"QInfiniteScroll": {
640-
"prefix": "qinfinitescroll",
641-
"body": [
642-
"q-infinite-scroll(:handler='${1:loadMore}')",
643-
"\tdiv(v-for='${2:item} in ${3:items}') $0",
644-
"\tq-spinner-dots(slot='message', :size='40')"
645-
],
646-
"description": "When you want to progressively load new content as the user scrolls down your Page, use QInfiniteScroll component."
647-
},
648656
"QSeparator": {
649657
"prefix": "qseparator",
650658
"body": [

0 commit comments

Comments
 (0)