├── .gitignore ├── .vscodeignore ├── .gitattributes ├── images └── icon.png ├── .vscode └── launch.json ├── LICENSE ├── vsc-extension-quickstart.md ├── package.json ├── CHANGELOG.md ├── README.md └── snippets ├── jade-snippets.json └── html-snippets.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.vsix 3 | package.json 4 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | .gitignore 4 | vsc-extension-quickstart.md 5 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set default behavior to automatically normalize line endings. 2 | * text=auto 3 | 4 | -------------------------------------------------------------------------------- /images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/vscode-quasar-snippets/master/images/icon.png -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "runtimeExecutable": "${execPath}", 13 | "args": [ 14 | "--extensionDevelopmentPath=${workspaceFolder}" 15 | ] 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Abdelaziz Mokhnache 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your VS Code Extension 2 | 3 | ## What's in the folder 4 | * This folder contains all of the files necessary for your extension. 5 | * `package.json` - this is the manifest file that defines the location of the snippet file 6 | and specifies the language of the snippets. 7 | * `snippets/snippets.json` - the file containing all snippets. 8 | 9 | ## Get up and running straight away 10 | * Press `F5` to open a new window with your extension loaded. 11 | * Create a new file with a file name suffix matching your language. 12 | * Verify that your snippets are proposed on intellisense. 13 | 14 | ## Make changes 15 | * You can relaunch the extension from the debug toolbar after making changes to the files listed above. 16 | * You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. 17 | 18 | ## Install your extension 19 | * To start using your extension with Visual Studio Code copy it into the `/.vscode/extensions` folder and restart Code. 20 | * To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension. 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quasar-snippets", 3 | "displayName": "Quasar Snippets", 4 | "description": "vscode snippets for quasar-framework ", 5 | "version": "1.0.0", 6 | "publisher": "abdelaziz18003", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/Abdelaziz18003/vscode-quasar-snippets.git" 10 | }, 11 | "scripts": { 12 | "pug": "vsc-snippets-html2pug --src snippets/html-snippets.json --dist snippets/jade-snippets.json" 13 | }, 14 | "icon": "images/icon.png", 15 | "engines": { 16 | "vscode": "^1.28.0" 17 | }, 18 | "categories": [ 19 | "Snippets" 20 | ], 21 | "contributes": { 22 | "snippets": [ 23 | { 24 | "language": "html", 25 | "path": "./snippets/html-snippets.json" 26 | }, 27 | { 28 | "language": "vue-html", 29 | "path": "./snippets/html-snippets.json" 30 | }, 31 | { 32 | "language": "jade", 33 | "path": "./snippets/jade-snippets.json" 34 | }, 35 | { 36 | "language": "vue-jade", 37 | "path": "./snippets/jade-snippets.json" 38 | } 39 | ] 40 | }, 41 | "__metadata": { 42 | "id": "d0d67b9a-ca83-4113-8a1e-4af32b28688d", 43 | "publisherDisplayName": "Abdelaziz Mokhnache", 44 | "publisherId": "cdd0e72d-bca3-4d14-bf7d-648c80d7a395" 45 | }, 46 | "devDependencies": { 47 | "vsc-snippets-html2pug": "^0.1.0" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to the "quasar-snippets" extension will be documented in this file. 4 | 5 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. 6 | 7 | ## [1.0.0] - 2019-09-17 8 | 9 | ### added 10 | 11 | - add QVirtualScroll component 12 | - add QNoSsr component 13 | - add QMenu component 14 | 15 | ### changed 16 | 17 | - update QVideo component 18 | - update QUploader component 19 | - update QTree component 20 | - update QTooltip component 21 | - update QRating component 22 | - update QPullToRefresh component 23 | - update QPopupEdit component 24 | - update QParallax component 25 | - update QResizeObservable & QScrollObservable 26 | 27 | ### deleted 28 | 29 | - delete old v0.17.x components 30 | 31 | 32 | ## [0.6.0] - 2019-09-06 33 | 34 | ### added 35 | 36 | - All new v1.0 components 37 | 38 | ### changed 39 | - update existing component until QItem to match new API 40 | 41 | ## [0.5.0] - 2019-04-29 42 | 43 | Adding Scrolling Components & Pug Templates Support 44 | 45 | ### added 46 | 47 | - Scrolling Components 48 | - Pug Templates Support 49 | 50 | ## [0.4.0] - 2019-03-26 51 | 52 | Adding Popups, Progress & Media Components 53 | 54 | ### added 55 | 56 | - Popups Components 57 | - Progress Components 58 | - Media Components 59 | 60 | ## [0.3.0] - 2018-12-09 61 | 62 | Adding Grouping Components 63 | 64 | ### added 65 | 66 | - Grouping Components 67 | 68 | ## [0.2.0] - 2018-10-28 69 | 70 | Adding Navigation Components 71 | 72 | ### added 73 | 74 | - Navigation Components 75 | 76 | ## [0.1.0] - 2018-10-17 77 | 78 | Initial release 79 | 80 | ### added 81 | 82 | - Layout Components 83 | - Buttons Components 84 | - Form Components -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vscode-quasar-snippets 2 | 3 | Quasar framework is an awesome project isn't it? But, do you find it tedious to remember the basic syntax for all the components it provides. So, this simple plugin is here to help you solving this problem. 4 | 5 | ## Features 6 | 7 | This plugin provides snippets with the basic usage syntax for the most used components of quasar-framework (All components soon). 8 | 9 | All you need to do is typing the component's name **all in lowercase** and press tab. (all components will follow this logic). 10 | 11 | ``` html 12 | qlayout + [tab] => 13 | ``` 14 | 15 | ![quasar-snippets-demo](https://user-images.githubusercontent.com/11301627/65047552-8e591e80-d95a-11e9-9ee2-c9ba915e0ff4.gif) 16 | 17 | For components properties, I tried to provide just the essential ones that are needed in most cases. The ones that are not used frequently can be looked up in the documentation. But if you find me missing some important property that is used frequently with a given component, don't hesitate to let me know. 18 | 19 | ## Contribution Guide 20 | 21 | This plugin is still in development. Please don't get upset if you don't find a given component and feel free to contribute instead. Your contributions of all sorts are welcome. Here are some guidelines to consider when submitting a contribution. 22 | 23 | - If you find a bug or you have a suggestion, feel free to open an issue for it. 24 | - If you want to add a new snippet or fix an existing bug, please open an issue for that (if it is not already open) and indicate that you are working on it to avoid working on the same issue by other developers. 25 | - Make sure to keep snippets organized according to the official documentation of quasar. 26 | - Snippet prefix must be the lowercase version of the component's name ex: QProgress => qprogress. 27 | - Snippet body must include only the most used properties. Component doc "Basic Usage" section is enough in *most* cases. 28 | - Snippet description can be the doc description of the component if it is small or just a meaningful part of it if it is long. 29 | 30 | - ***Important***: Pug snippets are auto-generated using `vsc-snippets-html2pug` module (run `npm install` to install it). After adding a new HTML snippet just run `npm run pug` to update the Pug snippets file. 31 | 32 | Again, your contributions of all sorts are welcome :heart: 33 | 34 | **Enjoy!** 35 | -------------------------------------------------------------------------------- /snippets/jade-snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "QLayout": { 3 | "prefix": "qlayout", 4 | "body": [ 5 | "q-layout(view='${1:hHr LpR lFf}', ${2:container}) $0" 6 | ], 7 | "description": "The QLayout is a component designed to manage the entire window and wrap page content with elements such as a navigational bar or a drawer. Multiple pages can share the same QLayout, so the code is reusable, which is one of their key points." 8 | }, 9 | "QHeader": { 10 | "prefix": "qheader", 11 | "body": [ 12 | "q-header(v-model='${1:header}', ${2:reveal}, ${3:elevated}, ${4:bordered}) $0" 13 | ], 14 | "description": "Layout header" 15 | }, 16 | "QFooter": { 17 | "prefix": "qfooter", 18 | "body": [ 19 | "q-footer(v-model='${1:footer}', ${2:reveal}, ${3:elevated}, ${4:bordered}) $0" 20 | ], 21 | "description": "Layout footer" 22 | }, 23 | "QDrawer": { 24 | "prefix": "qdrawer", 25 | "body": [ 26 | "q-layout-drawer(side='${1:left}', v-model='${2:drawerLeft}', ${3:bordered}, :width='${4:200}', :breakpoint='${5:500}', content-class='${6:bg-grey-3}') $0" 27 | ], 28 | "description": "QDrawer is the sidebar part of your QLayout." 29 | }, 30 | "QPageContainer": { 31 | "prefix": "qpagecontainer", 32 | "body": [ 33 | "q-page-container $0" 34 | ], 35 | "description": "Usually, the QPageContainer is part of the Layout template (where it contains a child only), and its content goes into separate vue files under /src/pages." 36 | }, 37 | "QPage": { 38 | "prefix": "qpage", 39 | "body": [ 40 | "q-page(:style-fn='${1:myTweak}', ${2:padding}) $0" 41 | ], 42 | "description": "A component that holds page content" 43 | }, 44 | "QPageSticky": { 45 | "prefix": "qpagesticky", 46 | "body": [ 47 | "q-page-sticky(position='${1:top-right}', :offset='[${2:18,18}]', ${3:expand}) $0" 48 | ], 49 | "description": "The QPageSticky component helps in placing DOM elements / components wrapped by it into a static position within the content area of your QPage, no matter where the user scrolls." 50 | }, 51 | "QPageScroller": { 52 | "prefix": "qpagescroller", 53 | "body": [ 54 | "q-page-scroller(position='${1:bottom-right}', :scroll-offset='${2:150}', :offset='[${3:18, 18}]')", 55 | "\tq-btn(fab, icon='keyboard_arrow_up', color='accent')" 56 | ], 57 | "description": "The QPageScroller component helps in placing DOM elements / components wrapped by it into a static position within the content area of your QPage, no matter where the user scrolls. It only appears after a scroll-offset (property) is reached. Once visible, the user can click on it to quickly get back to the top of the page via duration property." 58 | }, 59 | "QFab": { 60 | "prefix": "qfab", 61 | "body": [ 62 | "q-fab(color='${1:primary}', icon='${2:add}', direction='${3:up}')", 63 | "\tq-fab-action(color='${4:purple}', @click='${5:someMethod}', icon='${6:mail}')" 64 | ], 65 | "description": "A Floating Action Button (FAB) represents the primary action in an App Page. But, it’s not limited to only a single action. It can contain any number of sub-actions too" 66 | }, 67 | "QAjaxBar": { 68 | "prefix": "qajaxbar", 69 | "body": [ 70 | "q-ajax-bar(position='${1:top}', size='${2:4px}', color='${3:red}', ${4:skip-hijack})" 71 | ], 72 | "description": "QAjaxBar is a component which displays a loading bar (like Youtube) whenever an Ajax call (regardless of Ajax library used) is in progress. It can be manually triggered as well." 73 | }, 74 | "QAvatar": { 75 | "prefix": "qavatar", 76 | "body": [ 77 | "q-avatar(size='${1:100px}', font-size='${2:52px}', color='${3:teal}', text-color='${4:white}', icon='${5:directions}')" 78 | ], 79 | "description": "The QAvatar component creates a scalable, color-able element that can have text, icon or image within its shape. By default it is circular, but it can also be square or have a border-radius applied to give rounded corners to the square shape." 80 | }, 81 | "QBadge": { 82 | "prefix": "qbadge", 83 | "body": [ 84 | "q-badge(color='{1:orange}', text-color='{2:black}', label='{3:v1.0.0}')" 85 | ], 86 | "description": "The QBadge component allows you to create a small badge for adding information like contextual data that needs to stand out and get noticed. It is also often useful in combination with other elements like a user avatar to show a number of new messages." 87 | }, 88 | "QBanner": { 89 | "prefix": "qbanner", 90 | "body": [ 91 | "q-banner.{1:bg-primary.text-white}", 92 | "\t| {2:Unfortunately, the credit card did not go through, please try again.}", 93 | "\ttemplate(v-slot:action)" 94 | ], 95 | "description": "The QBanner component creates a banner element to display a prominent message and related optional actions." 96 | }, 97 | "QBar": { 98 | "prefix": "qbar", 99 | "body": [ 100 | "q-bar.${1:bg-primary.text-white}(dark)", 101 | "\tq-btn(dense, flat, round, icon='lens', size='8.5px', color='red')", 102 | "\t\tq-btn(dense, flat, round, icon='lens', size='8.5px', color='yellow')", 103 | "\t\t\tq-btn(dense, flat, round, icon='lens', size='8.5px', color='green')", 104 | "\t\t\t\t.col.text-center.text-weight-bold ${2:My-App}" 105 | ], 106 | "description": "The QBar is a small component for creating the top bar on different types of mobile or desktop websites/apps." 107 | }, 108 | "QBreadcrumbs": { 109 | "prefix": "qbreadcrumbs", 110 | "body": [ 111 | "q-breadcrumbs", 112 | "\tq-breadcrumbs-el(label='${1:Home}', icon='${2:home}')", 113 | "\t\tq-breadcrumbs-el(label='${3:Components}', icon='${4:widgets}')", 114 | "\t\t\tq-breadcrumbs-el(label='${5:Breadcrumbs}', icon='${6:navigation}')" 115 | ], 116 | "description": "The QBreadcrumbs component is used as a navigational aid in UI. It allows users to keep track of their location within programs, documents, or websites. Most common use is it’s in a QToolbar, but it’s not limited to it." 117 | }, 118 | "QBtn": { 119 | "prefix": "qbtn", 120 | "body": [ 121 | "q-btn(color='${1:primary}', icon='${2:check}', label='${3:OK}', @click='${4:onClick}') $0" 122 | ], 123 | "description": "QBtn is a button with a few extra useful features. For instance, it comes in two shapes: rectangle (default) and round. It also has the material ripple effect baked in (which can be disabled)." 124 | }, 125 | "QBtnGroup": { 126 | "prefix": "qbtngroup", 127 | "body": [ 128 | "q-btn-group", 129 | "\tq-btn(label='${1:One}', @click='${2:clickHandler1}')", 130 | "\t\tq-btn(label='${3:Two}', @click='${4:clickHandler2}')", 131 | "\t\t\tq-btn(label='${5:Three}', @click='${6:clickHandler3}')" 132 | ], 133 | "description": "You can conveniently group QBtn and QBtnDropdown using QBtnGroup" 134 | }, 135 | "QBtnDropdown": { 136 | "prefix": "qbtndropdown", 137 | "body": [ 138 | "q-btn-dropdown(label='${1:Button}', color='${2:primary}')", 139 | "\tq-list", 140 | "\t\tq-item(clickable, v-close-popup, @click='${3:onItemClick}')", 141 | "\t\t\tq-item-section", 142 | "\t\t\t\tq-item-label ${4:Photos}" 143 | ], 144 | "description": "QBtnDropdown is a very convenient dropdown button. Goes very well with QList as dropdown content, but it’s by no means limited to it." 145 | }, 146 | "QCard": { 147 | "prefix": "qcard", 148 | "body": [ 149 | "q-card.my-card", 150 | "\timg(src='${1:https://cdn.quasar.dev/img/mountains.jpg}')", 151 | "\tq-card-section", 152 | "\t\t.text-h6 ${2:Our Changing Planet}", 153 | "\t\t.text-subtitle2 ${3:by John Doe}", 154 | "\tq-card-section ${4:Lorem ipsum dolor sit amet, consectetur adipiscing elit}" 155 | ], 156 | "description": "The QCard component is a great way to display important pieces of grouped content. This pattern is quickly emerging as a core design pattern for Apps, website previews and email content. It assists the viewer by containing and organizing information, while also setting up predictable expectations." 157 | }, 158 | "QCardSection": { 159 | "prefix": "qcardsection", 160 | "body": [ 161 | "q-card-section Lorem ipsum dolor sit amet" 162 | ], 163 | "description": "No Description yet." 164 | }, 165 | "QCardActions": { 166 | "prefix": "qcardactions", 167 | "body": [ 168 | "q-card-actions(${1:vertical}, align='${2:center}')", 169 | "\tq-btn(flat, label='${3:Action 1}')", 170 | "\t\tq-btn(flat, label='${4:Action 2}')" 171 | ], 172 | "description": "Cards can have some actions (buttons) attached to them." 173 | }, 174 | "QCarousel": { 175 | "prefix": "qcarousel", 176 | "body": [ 177 | "q-carousel.bg-purple.text-white.shadow-1.rounded-borders(v-model='slide', transition-prev='jump-right', transition-next='jump-left', swipeable, animated, control-color='white', prev-icon='arrow_left', next-icon='arrow_right', navigation-icon='radio_button_unchecked', navigation, padding, arrows, height='300px')", 178 | "\tq-carousel-slide.column.no-wrap.flex-center(name='style')", 179 | "\t\tq-icon(name='style', size='56px')", 180 | "\t\t\t.q-mt-md.text-center Lorem ipsum dolor sit amet, consectetur adipiscing elit", 181 | "\tq-carousel-slide.column.no-wrap.flex-center(name='tv')", 182 | "\t\tq-icon(name='live_tv', size='56px')", 183 | "\t\t\t.q-mt-md.text-center Lorem ipsum dolor sit amet, consectetur adipiscing elit" 184 | ], 185 | "description": "The QCarousel component allows you to display more information with less real estate, using slides. Useful for creating Wizards or an image gallery too." 186 | }, 187 | "QChatMessage": { 188 | "prefix": "qchatmessage", 189 | "body": [ 190 | "q-chat-message(name='${1:me}', avatar='${2:https://cdn.quasar.dev/img/avatar3.jpg}', :text='['${3:hey, how are you?}']', stamp='${4:7 minutes ago}', ${5:sent}, bg-color='${6:amber-7}')" 191 | ], 192 | "description": "Quasar supplies a chat component called QChatMessage which is really a chat entry that renders the data given by the props." 193 | }, 194 | "QChip": { 195 | "prefix": "qchip", 196 | "body": [ 197 | "q-chip.${1:glossy}(icon='${2:directions}', label='${3:Get directions}')" 198 | ], 199 | "description": "The QChip component is basically a simple UI block entity, representing for example more advanced underlying data, such as a contact, in a compact way." 200 | }, 201 | "QCircularProgress": { 202 | "prefix": "qcircularprogress", 203 | "body": [ 204 | "q-circular-progress.${7:q-ma-md}(${1:indeterminate}, size='${2:90px}', :thickness='${3:0.2}', color='${4:lime}', center-color='${5:grey-8}', track-color='${6:transparent}')" 205 | ], 206 | "description": "The QCircularProgress component displays a colored circular progress. The bar can either have a determinate progress, or an indeterminate animation. It should be used to inform the user that an action is occurring in the background." 207 | }, 208 | "QColor": { 209 | "prefix": "qcolor", 210 | "body": [ 211 | "q-color.my-picker(v-model='hex', inline)" 212 | ], 213 | "description": "The QColor component provides a method to input colors." 214 | }, 215 | "QDialog": { 216 | "prefix": "qdialog", 217 | "body": [ 218 | "q-dialog(v-model='${1:confirm}', persistent)", 219 | "\tq-card", 220 | "\t\tq-card-section.row.items-center", 221 | "\t\t\tq-avatar(icon='signal_wifi_off', color='primary', text-color='white')", 222 | "\t\t\t\tspan.q-ml-sm You are currently not connected to any network.", 223 | "\t\tq-card-actions(align='right')", 224 | "\t\t\tq-btn(flat, label='${2:Cancel}', color='primary', v-close-popup)", 225 | "\t\t\t\tq-btn(flat, label='${3:Turn on Wifi}', color='primary', v-close-popup)" 226 | ], 227 | "description": "The QDialog component is a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions)." 228 | }, 229 | "QEditor": { 230 | "prefix": "qeditor", 231 | "body": [ 232 | "q-editor(v-model='${1:editor}', min-height='${2:5rem}', ${3:flat})" 233 | ], 234 | "description": "The QEditor component is a WYSIWYG (“what you see is what you get”) editor component that enables the user to write and even paste HTML." 235 | }, 236 | "QExpansionItem": { 237 | "prefix": "qexpansionitem", 238 | "body": [ 239 | "q-expansion-item(${1:expand-separator}, icon='${2:perm_identity}', label='${3:Account settings}', caption='${4:John Doe}') $0" 240 | ], 241 | "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." 242 | }, 243 | "QInput": { 244 | "prefix": "qinput", 245 | "body": [ 246 | "q-input(v-model='${1:text}', type='${2:text}', label='${3:Label}') $0" 247 | ], 248 | "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." 249 | }, 250 | "QSelect": { 251 | "prefix": "qselect", 252 | "body": [ 253 | "q-select(v-model='${1:model}', :options='${2:options}', label='${3:Standard}', ${4:filled})" 254 | ], 255 | "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." 256 | }, 257 | "QForm": { 258 | "prefix": "qform", 259 | "body": [ 260 | "q-form.q-gutter-md(@submit='${1:onSubmit}', @reset='${2:onReset}')", 261 | "\t| $0", 262 | "\tdiv", 263 | "\t\tq-btn(label='${3:Submit}', type='submit', color='primary')", 264 | "\t\t\tq-btn.q-ml-sm(label='${4:Reset}', type='reset', color='primary', flat)" 265 | ], 266 | "description": "The QForm component renders a
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." 267 | }, 268 | "QField": { 269 | "prefix": "qfield", 270 | "body": [ 271 | "q-field(${1:rounded}, ${2:filled}, label='${3:Rounded filled}', ${4:stack-label}) $0" 272 | ], 273 | "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." 274 | }, 275 | "QRadio": { 276 | "prefix": "qradio", 277 | "body": [ 278 | "q-radio(v-model='${1:shape}', val='${2:line}', label='${3:Line}')" 279 | ], 280 | "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." 281 | }, 282 | "QCheckbox": { 283 | "prefix": "qcheckbox", 284 | "body": [ 285 | "q-checkbox(${1:left-label}, v-model='${2:orange}', label='${3:Orange}')" 286 | ], 287 | "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." 288 | }, 289 | "QToggle": { 290 | "prefix": "qtoggle", 291 | "body": [ 292 | "q-toggle(v-model='${1:value}', color='${2:green}')" 293 | ], 294 | "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." 295 | }, 296 | "QBtnToggle": { 297 | "prefix": "qbtntoggle", 298 | "body": [ 299 | "q-btn-toggle(v-model='${1:model}', toggle-color='${2:primary}', :options='[ {label: '${3:One}', value: '${4:one}'}, {label: '${5:Two}', value: '${6:two}'}, {label: '${7:Three}', value: '${8:three}'} ]')" 300 | ], 301 | "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." 302 | }, 303 | "QOptionGroup": { 304 | "prefix": "qoptiongroup", 305 | "body": [ 306 | "q-option-group(v-model='${1:group}', type='${2:checkbox}', color='${3:secondary}', :options='${4:options}')" 307 | ], 308 | "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." 309 | }, 310 | "QSlider": { 311 | "prefix": "qslider", 312 | "body": [ 313 | "q-slider(v-model='${1:model}', :min='${2:1}', :max='${3:7}', :step='${4:2}', color='${5:green}')" 314 | ], 315 | "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." 316 | }, 317 | "QRange": { 318 | "prefix": "qrange", 319 | "body": [ 320 | "q-range(v-model='${1:rangeValues}', :min='${2:0}', :max='${3:10}', :step='${4:1}', color='${5:green}')" 321 | ], 322 | "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" 323 | }, 324 | "QTime": { 325 | "prefix": "qtime", 326 | "body": [ 327 | "q-time(v-model='${1:timeWithSeconds}', ${2:with-seconds})" 328 | ], 329 | "description": "The QTime component provides a method to input time." 330 | }, 331 | "QDate": { 332 | "prefix": "qdate", 333 | "body": [ 334 | "q-date(v-model='${1:date}', ${2:landscape}, ${3:minimal})" 335 | ], 336 | "description": "The QDate component provides a method to input date. Currently it supports Gregorian (default) and Persian calendars." 337 | }, 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 | }, 377 | "QLinearProgress": { 378 | "prefix": "qlinearprogress", 379 | "body": [ 380 | "q-linear-progress.${5:q-mt-sm}(:value='${1:progress}', ${2:rounded}, color='${3:purple}', track-color='${4:orange}')" 381 | ], 382 | "description": "The QLinearProgress component displays a colored loading bar. The bar can either have a determinate progress or an indeterminate animation. It should be used to inform the user that an action is occurring in the background." 383 | }, 384 | "QList": { 385 | "prefix": "qlist", 386 | "body": [ 387 | "q-list(bordered)", 388 | "\tq-item(${1:clickable}, ${2:v-ripple})", 389 | "\t\tq-item-section(${3:avatar})", 390 | "\t\t\tq-icon(color='${4:primary}', name='${5:bluetooth}')", 391 | "\t\tq-item-section Icon as avatar" 392 | ], 393 | "description": "The QList and QItem are a group of components which can work together to present multiple line items vertically as a single continuous element." 394 | }, 395 | "QItem": { 396 | "prefix": "qitem", 397 | "body": [ 398 | "q-item", 399 | "\tq-item-section(top, avatar)", 400 | "\t\tq-avatar(color='primary', text-color='white', icon='bluetooth')", 401 | "\tq-item-section", 402 | "\t\tq-item-label Single line item", 403 | "\t\tq-item-label(caption, lines='2') Secondary line text.", 404 | "\tq-item-section(side, top)", 405 | "\t\tq-item-label(caption) 5 min ago", 406 | "\t\tq-icon(name='star', color='yellow')" 407 | ], 408 | "description": "Lists can encapsulate Items or Item-like components, for example QCollapsible." 409 | }, 410 | "QMarkupTable": { 411 | "prefix": "qmarkuptable", 412 | "body": [ 413 | "q-markup-table ${1:Dessert}${2:Calories}${3:Frozen Yogurt}${4:159}" 414 | ], 415 | "description": "The QMarkupTable is a way for you to simply wrap a native in order to make it look like a Material Design table." 416 | }, 417 | "QMenu": { 418 | "prefix": "qmenu", 419 | "body": [ 420 | "q-menu", 421 | "\tq-list(style='min-width: 100px')", 422 | "\t\tq-item(clickable, v-close-popup)", 423 | "\t\t\tq-item-section New tab", 424 | "\t\tq-separator", 425 | "\t\t\tq-item(clickable, v-close-popup)", 426 | "\t\t\t\tq-item-section New incognito tab" 427 | ], 428 | "description": "The QMenu component is a convenient way to show menus. Goes very well with QList as dropdown content, but it’s by no means limited to it." 429 | }, 430 | "QNoSsr": { 431 | "prefix": "qnossr", 432 | "body": [ 433 | "q-no-ssr", 434 | "\tdiv This won't be rendered on server" 435 | ], 436 | "description": "The QNoSsr component makes sense only if you are creating a SSR website/app. It avoids rendering its content on the server and leaves that for client only. Useful when you got code that is not isomorphic and can only run on the client side, in a browser." 437 | }, 438 | "QResizeObservable": { 439 | "prefix": "qresizeobservable", 440 | "body": [ 441 | "q-resize-observable(@resize='${1:onResize}') $0" 442 | ], 443 | "description": "QResizeObserver is a Quasar component that emits a resize event whenever the wrapping DOM element / component (defined as direct parent of QResizeObserver) changes its size (width and/or height)." 444 | }, 445 | "QScrollObservable": { 446 | "prefix": "qscrollobservable", 447 | "body": [ 448 | "q-scroll-observable(@scroll='${1:onScroll}')" 449 | ], 450 | "description": "QScrollObserver 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." 451 | }, 452 | "QPagination": { 453 | "prefix": "qpagination", 454 | "body": [ 455 | "q-pagination(v-model='${1:current}', :max='${2:6}')" 456 | ], 457 | "description": "The QPagination component is available for whenever a pagination system is required. It offers the user a simple UI for moving between items or pages." 458 | }, 459 | "QParallax": { 460 | "prefix": "qparallax", 461 | "body": [ 462 | "q-parallax(src='${1:https://cdn.quasar.dev/img/parallax2.jpg}', :speed='${2:0.5}') $0" 463 | ], 464 | "description": "Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion." 465 | }, 466 | "QPopupEdit": { 467 | "prefix": "qpopupedit", 468 | "body": [ 469 | "q-popup-edit(v-model='${1:props.row.name}', title='${2:Edit the Name}')", 470 | "\tq-input(v-model='${3:props.row.name}', ${4:dense}, ${5:autofocus})" 471 | ], 472 | "description": "The QPopupEdit component can be used to edit a value “in place”, like for example a cell in QTable. By default, a cell is displayed as a String, then if you are using QPopupEdit and a user clicks/taps on the table cell, a popup will open where the user will be able to edit the value using a textfield." 473 | }, 474 | "QPopupProxy": { 475 | "prefix": "qpopupproxy", 476 | "body": [ 477 | "q-popup-proxy", 478 | "\tq-banner", 479 | "\t\ttemplate(v-slot:avatar)", 480 | "\t\t| ${3:You have lost connection to the internet. This app is offline.}" 481 | ], 482 | "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." 483 | }, 484 | "QPullToRefresh": { 485 | "prefix": "qpulltorefresh", 486 | "body": [ 487 | "q-pull-to-refresh(@refresh='${1:refresh}', color='primary') $0" 488 | ], 489 | "description": "The QPullToRefresh is a component that allows the user to pull down in order to refresh page content (or retrieve the newest content)." 490 | }, 491 | "QRating": { 492 | "prefix": "qrating", 493 | "body": [ 494 | "q-rating(v-model='${1:ratingModel}', size='${2:1.5em}', icon='${3:star}')" 495 | ], 496 | "description": "Quasar Rating is a Component which allows users to rate items, usually known as “Star Rating”." 497 | }, 498 | "QScrollArea": { 499 | "prefix": "qscrollarea", 500 | "body": [ 501 | "q-scroll-area(style='width: ${1:400px}; height: ${2:200px};')", 502 | "\tdiv(v-for='${3:n} in ${4:10}') Lorem ipsum dolor sit amet, consectetur adipisicing" 503 | ], 504 | "description": "The QScrollArea component offers a neat way of customizing the scrollbars by encapsulating your content. Think of it as a DOM element which has overflow: auto, but with your own custom styled scrollbar instead of browser’s default one and a few nice features on top." 505 | }, 506 | "QSeparator": { 507 | "prefix": "qseparator", 508 | "body": [ 509 | "q-separator(${1:spaced}, ${2:inset}, ${3:vertical}, ${4:dark})" 510 | ], 511 | "description": "The QSeparator component is used to separate sections of text, other components, etc… It creates a colored line across the width of the parent. It can be horizontal or vertical." 512 | }, 513 | "QSlideItem": { 514 | "prefix": "QSlideItem", 515 | "body": [ 516 | "q-slide-item(@left='${1:onLeft}', @right='${2:onRight}')", 517 | "\ttemplate(v-slot:left)", 518 | "\ttemplate(v-slot:right)", 519 | "\tq-item", 520 | "\t\tq-item-section(avatar)", 521 | "\t\t\tq-avatar(color='${5:primary}', text-color='${6:white}', icon='${7:bluetooth}')", 522 | "\t\tq-item-section ${8:Icons only}" 523 | ], 524 | "description": "The QSlideItem component is essentially a QItem with two additional slots (left and right) which allows user to drag the item (through mouse or with the finger on a touch device) to one of the sides in order to apply a specific action." 525 | }, 526 | "QSlideTransition": { 527 | "prefix": "qslidetransition", 528 | "body": [ 529 | "q-slide-transition", 530 | "\tdiv(v-show='visible')", 531 | "\t\timg.responsive(src='https://cdn.quasar.dev/img/quasar.jpg')" 532 | ], 533 | "description": "QSlideTransition slides the DOM element (or component) up or down, based on its visibility: works alongside v-show and v-if on a single element, similar to Vue’s Transition component with the only difference being that it’s not a group transition too (it only applies to one DOM element or component)." 534 | }, 535 | "QSpace": { 536 | "prefix": "qspace", 537 | "body": [ 538 | "q-space" 539 | ], 540 | "description": "The purpose of QSpace (has no props) is to simply fill all available space inside of a flexbox DOM element." 541 | }, 542 | "QSpinner": { 543 | "prefix": "qspinner", 544 | "body": [ 545 | "q-spinner-(${1:gears}, color='${2:primary}', size='${3:3rem}', :thickness='${4:5}')" 546 | ], 547 | "description": "A Spinner is used to show the user a timely process is currently taking place. It is an important UX feature, which gives the user the feeling the system is continuing to work for longer term activities, like grabbing data from the server or some heavy calculations." 548 | }, 549 | "QSplitter": { 550 | "prefix": "qsplitter", 551 | "body": [ 552 | "q-splitter(v-model='${1:splitterModel}', style='${2:height: 400px}', ${3:horizontal})", 553 | "\ttemplate(v-slot:before)", 554 | "\ttemplate(v-slot:separator)", 555 | "\ttemplate(v-slot:after)" 556 | ], 557 | "description": "The QSplitter component allow containers to be split vertically and/or horizontally through a draggable separator bar." 558 | }, 559 | "QStepper": { 560 | "prefix": "qstepper", 561 | "body": [ 562 | "q-stepper(v-model='${1:step}', ref='${2:stepper}', color='${3:primary}', ${4:animated})", 563 | "\tq-step(:name='${5:1}', title='${6:Select campaign settings}', icon='${7:settings}', :done='${8:step > 1}') For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.", 564 | "\tq-step(:name='${9:2}', title='${10:Create an ad group}', caption='${11:Optional}', icon='${12:create_new_folder}', :done='${13:step > 2}') An ad group contains one or more ads which target a shared set of keywords.", 565 | "\ttemplate(v-slot:navigation)" 566 | ], 567 | "description": "A Stepper conveys progress through numbered steps. Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. It’s usually useful when the user has to follow steps to complete a process." 568 | }, 569 | "QTable": { 570 | "prefix": "qtable", 571 | "body": [ 572 | "q-table(title='${1:Table Title}', :data='${2:data}', :columns='${3:columns}', row-key='${4:name}')" 573 | ], 574 | "description": "QTable is a component that allows you to display data in a tabular manner. It’s generally called a datatable." 575 | }, 576 | "QTabs": { 577 | "prefix": "qtabs", 578 | "body": [ 579 | "q-tabs.${2:text-teal}(v-model='${1:tab}')", 580 | "\tq-tab(name='${3:mails}', icon='${4:mail}', label='${5:Mails}')", 581 | "\t\tq-tab(name='${6:alarms}', icon='${7:alarm}', label='${8:Alarms}')", 582 | "\t\t\tq-tab(name='${9:movies}', icon='${10:movie}', label='${11:Movies}')" 583 | ], 584 | "description": "Tabs are a way of displaying more information using less window real estate." 585 | }, 586 | "QTabPanels": { 587 | "prefix": "qtabpanels", 588 | "body": [ 589 | "q-tab-panels(v-model='${1:tab}', animated)", 590 | "\tq-tab-panel(name='${2:mails}')", 591 | "\t\t.text-h6 ${3:Mails}", 592 | "\t\t| Lorem ipsum dolor sit amet consectetur adipisicing elit.", 593 | "\tq-tab-panel(name='${4:alarms}')", 594 | "\t\t.text-h6 ${5:Alarms}", 595 | "\t\t| Lorem ipsum dolor sit amet consectetur adipisicing elit.", 596 | "\tq-tab-panel(name='${6:movies}')", 597 | "\t\t.text-h6 ${7:Movies}", 598 | "\t\t| Lorem ipsum dolor sit amet consectetur adipisicing elit." 599 | ], 600 | "description": "Tab panels are a way of displaying more information using less window real estate." 601 | }, 602 | "QTimeline": { 603 | "prefix": "qtimeline", 604 | "body": [ 605 | "q-timeline(color='secondary', layout='dense')", 606 | "\tq-timeline-entry(heading) Timeline heading", 607 | "\tq-timeline-entry(title='Event Title', subtitle='February 22, 1986', avatar='https://cdn.quasar.dev/img/avatar2.jpg')", 608 | "\t\tdiv Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 609 | "\tq-timeline-entry(title='Event Title', subtitle='February 22, 1986', color='orange', icon='done_all')", 610 | "\t\tdiv Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." 611 | ], 612 | "description": "The QTimeline component displays a list of events in chronological order. It is typically a graphic design showing a long bar labelled with dates alongside itself and usually events. Timelines can use any time scale, depending on the subject and data." 613 | }, 614 | "QToolbar": { 615 | "prefix": "qtoolbar", 616 | "body": [ 617 | "q-toolbar.bg-${1:purple}.text-${2:white}", 618 | "\tq-btn(flat, round, dense, icon='${3:assignment_ind}')", 619 | "\t\tq-toolbar-title ${4:Toolbar}", 620 | "\t\tq-btn.q-mr-xs(flat, round, dense, icon='${5:apps}')", 621 | "\t\t\tq-btn(flat, round, dense, icon='${6:more_vert}')" 622 | ], 623 | "description": "QToolbar is a component usually part of Layout Header and Footer, but it can be used anywhere on the page." 624 | }, 625 | "QTooltip": { 626 | "prefix": "qtooltip", 627 | "body": [ 628 | "q-tooltip(v-model='${1:showing}') $0" 629 | ], 630 | "description": "The QTooltip component is to be used when you want to offer the user more information about a certain area in your App. When hovering the mouse over the target element (or quickly tapping on mobile platforms), the tooltip will appear." 631 | }, 632 | "QTree": { 633 | "prefix": "qtree", 634 | "body": [ 635 | "q-tree(:nodes='${1:simple}', node-key='${2:label}', :expanded.sync='${3:expanded}', ${4:dark})" 636 | ], 637 | "description": "Quasar Tree represents a highly configurable component that displays hierarchical data, such as a table of contents in a tree structure." 638 | }, 639 | "QUploader": { 640 | "prefix": "quploader", 641 | "body": [ 642 | "q-uploader(url='${1:http://localhost:4444/upload}', color='${2:teal}', ${3:flat}, ${4:bordered}, style='${5:max-width: 300px}')" 643 | ], 644 | "description": "Quasar supplies a way for you to upload files through the QUploader component." 645 | }, 646 | "QVideo": { 647 | "prefix": "qvideo", 648 | "body": [ 649 | "q-video(src='${1:https://www.youtube.com/embed/k3_tw44QsZQ?rel=0}')" 650 | ], 651 | "description": "Using the QVideo component makes embedding a video like Youtube easy. It also resizes to fit the container by default." 652 | }, 653 | "QVirtualScroll": { 654 | "prefix": "qvirtualscroll", 655 | "body": [ 656 | "q-virtual-scroll(style='max-height: 300px;', :items='${1:heavyList}', ${2:separator})", 657 | "\ttemplate(v-slot='{ item, index }')" 658 | ], 659 | "description": "The QVirtualScroll component allows you to display only a part of a long list of items and update the visible items as the user scrolls in the container. This has several advantages: only visible items are rendered, so the smallest number of nodes are in the DOM tree at any given point in time and the memory consumption is kept at its lowest." 660 | } 661 | } -------------------------------------------------------------------------------- /snippets/html-snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "QLayout": { 3 | "prefix": "qlayout", 4 | "body": [ 5 | "$0" 6 | ], 7 | "description": "The QLayout is a component designed to manage the entire window and wrap page content with elements such as a navigational bar or a drawer. Multiple pages can share the same QLayout, so the code is reusable, which is one of their key points." 8 | }, 9 | "QHeader": { 10 | "prefix": "qheader", 11 | "body": [ 12 | "$0" 13 | ], 14 | "description": "Layout header" 15 | }, 16 | "QFooter": { 17 | "prefix": "qfooter", 18 | "body": [ 19 | "$0" 20 | ], 21 | "description": "Layout footer" 22 | }, 23 | "QDrawer": { 24 | "prefix": "qdrawer", 25 | "body": [ 26 | "", 34 | "\t$0", 35 | "" 36 | ], 37 | "description": "QDrawer is the sidebar part of your QLayout." 38 | }, 39 | "QPageContainer": { 40 | "prefix": "qpagecontainer", 41 | "body": [ 42 | "$0" 43 | ], 44 | "description": "Usually, the QPageContainer is part of the Layout template (where it contains a child only), and its content goes into separate vue files under /src/pages." 45 | }, 46 | "QPage": { 47 | "prefix": "qpage", 48 | "body": [ 49 | "$0" 50 | ], 51 | "description": "A component that holds page content" 52 | }, 53 | "QPageSticky": { 54 | "prefix": "qpagesticky", 55 | "body": [ 56 | "", 57 | "\t$0", 58 | "" 59 | ], 60 | "description": "The QPageSticky component helps in placing DOM elements / components wrapped by it into a static position within the content area of your QPage, no matter where the user scrolls." 61 | }, 62 | "QPageScroller": { 63 | "prefix": "qpagescroller", 64 | "body": [ 65 | "", 66 | "\t", 67 | "" 68 | ], 69 | "description": "The QPageScroller component helps in placing DOM elements / components wrapped by it into a static position within the content area of your QPage, no matter where the user scrolls. It only appears after a scroll-offset (property) is reached. Once visible, the user can click on it to quickly get back to the top of the page via duration property." 70 | }, 71 | "QFab": { 72 | "prefix": "qfab", 73 | "body": [ 74 | "", 75 | "\t", 76 | "" 77 | ], 78 | "description": "A Floating Action Button (FAB) represents the primary action in an App Page. But, it’s not limited to only a single action. It can contain any number of sub-actions too" 79 | }, 80 | "QAjaxBar": { 81 | "prefix": "qajaxbar", 82 | "body": [ 83 | "" 84 | ], 85 | "description": "QAjaxBar is a component which displays a loading bar (like Youtube) whenever an Ajax call (regardless of Ajax library used) is in progress. It can be manually triggered as well." 86 | }, 87 | "QAvatar": { 88 | "prefix": "qavatar", 89 | "body": [ 90 | "" 91 | ], 92 | "description": "The QAvatar component creates a scalable, color-able element that can have text, icon or image within its shape. By default it is circular, but it can also be square or have a border-radius applied to give rounded corners to the square shape." 93 | }, 94 | "QBadge": { 95 | "prefix": "qbadge", 96 | "body": [ 97 | "" 98 | ], 99 | "description": "The QBadge component allows you to create a small badge for adding information like contextual data that needs to stand out and get noticed. It is also often useful in combination with other elements like a user avatar to show a number of new messages." 100 | }, 101 | "QBanner": { 102 | "prefix": "qbanner", 103 | "body": [ 104 | "", 105 | "\t{2:Unfortunately, the credit card did not go through, please try again.}", 106 | "\t", 110 | "" 111 | ], 112 | "description": "The QBanner component creates a banner element to display a prominent message and related optional actions." 113 | }, 114 | "QBar": { 115 | "prefix": "qbar", 116 | "body": [ 117 | "", 118 | "\t", 119 | "\t", 120 | "\t", 121 | "\t
", 122 | "\t\t${2:My-App}", 123 | "\t
", 124 | "" 125 | ], 126 | "description": "The QBar is a small component for creating the top bar on different types of mobile or desktop websites/apps." 127 | }, 128 | "QBreadcrumbs": { 129 | "prefix": "qbreadcrumbs", 130 | "body": [ 131 | "", 132 | "\t", 133 | "\t", 134 | "\t", 135 | "" 136 | ], 137 | "description": "The QBreadcrumbs component is used as a navigational aid in UI. It allows users to keep track of their location within programs, documents, or websites. Most common use is it’s in a QToolbar, but it’s not limited to it." 138 | }, 139 | "QBtn": { 140 | "prefix": "qbtn", 141 | "body": [ 142 | "$0" 143 | ], 144 | "description": "QBtn is a button with a few extra useful features. For instance, it comes in two shapes: rectangle (default) and round. It also has the material ripple effect baked in (which can be disabled)." 145 | }, 146 | "QBtnGroup": { 147 | "prefix": "qbtngroup", 148 | "body": [ 149 | "", 150 | "\t", 151 | "\t", 152 | "\t", 153 | "" 154 | ], 155 | "description": "You can conveniently group QBtn and QBtnDropdown using QBtnGroup" 156 | }, 157 | "QBtnDropdown": { 158 | "prefix": "qbtndropdown", 159 | "body": [ 160 | "", 161 | "\t", 162 | "\t\t", 163 | "\t\t\t", 164 | "\t\t\t\t${4:Photos}", 165 | "\t\t\t", 166 | "\t\t", 167 | "\t", 168 | "" 169 | ], 170 | "description": "QBtnDropdown is a very convenient dropdown button. Goes very well with QList as dropdown content, but it’s by no means limited to it." 171 | }, 172 | "QCard": { 173 | "prefix": "qcard", 174 | "body": [ 175 | "", 176 | "\t", 177 | "\t", 178 | "\t\t
${2:Our Changing Planet}
", 179 | "\t\t
${3:by John Doe}
", 180 | "\t", 181 | "\t", 182 | "\t\t${4:Lorem ipsum dolor sit amet, consectetur adipiscing elit}", 183 | "\t", 184 | "" 185 | ], 186 | "description": "The QCard component is a great way to display important pieces of grouped content. This pattern is quickly emerging as a core design pattern for Apps, website previews and email content. It assists the viewer by containing and organizing information, while also setting up predictable expectations." 187 | }, 188 | "QCardSection": { 189 | "prefix": "qcardsection", 190 | "body": [ 191 | "", 192 | "\tLorem ipsum dolor sit amet", 193 | "" 194 | ], 195 | "description": "No Description yet." 196 | }, 197 | "QCardActions": { 198 | "prefix": "qcardactions", 199 | "body": [ 200 | "", 201 | "\t", 202 | "\t", 203 | "" 204 | ], 205 | "description": "Cards can have some actions (buttons) attached to them." 206 | }, 207 | "QCarousel": { 208 | "prefix": "qcarousel", 209 | "body": [ 210 | "", 226 | "\t", 227 | "\t\t", 228 | "\t\t
", 229 | "\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit", 230 | "\t\t
", 231 | "\t", 232 | "\t", 233 | "\t\t", 234 | "\t\t
", 235 | "\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit", 236 | "\t\t
", 237 | "\t", 238 | "" 239 | ], 240 | "description": "The QCarousel component allows you to display more information with less real estate, using slides. Useful for creating Wizards or an image gallery too." 241 | }, 242 | "QChatMessage": { 243 | "prefix": "qchatmessage", 244 | "body": [ 245 | "" 253 | ], 254 | "description": "Quasar supplies a chat component called QChatMessage which is really a chat entry that renders the data given by the props." 255 | }, 256 | "QChip": { 257 | "prefix": "qchip", 258 | "body": [ 259 | "" 260 | ], 261 | "description": "The QChip component is basically a simple UI block entity, representing for example more advanced underlying data, such as a contact, in a compact way." 262 | }, 263 | "QCircularProgress": { 264 | "prefix": "qcircularprogress", 265 | "body": [ 266 | "" 275 | ], 276 | "description": "The QCircularProgress component displays a colored circular progress. The bar can either have a determinate progress, or an indeterminate animation. It should be used to inform the user that an action is occurring in the background." 277 | }, 278 | "QColor": { 279 | "prefix": "qcolor", 280 | "body": [ 281 | "" 282 | ], 283 | "description": "The QColor component provides a method to input colors." 284 | }, 285 | "QDialog": { 286 | "prefix": "qdialog", 287 | "body": [ 288 | "", 289 | "\t", 290 | "\t\t", 291 | "\t\t\t", 292 | "\t\t\tYou are currently not connected to any network.", 293 | "\t\t", 294 | "\t\t", 295 | "\t\t\t", 296 | "\t\t\t", 297 | "\t\t", 298 | "\t", 299 | "" 300 | ], 301 | "description": "The QDialog component is a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions)." 302 | }, 303 | "QEditor": { 304 | "prefix": "qeditor", 305 | "body": [ 306 | "" 307 | ], 308 | "description": "The QEditor component is a WYSIWYG (“what you see is what you get”) editor component that enables the user to write and even paste HTML." 309 | }, 310 | "QExpansionItem": { 311 | "prefix": "qexpansionitem", 312 | "body": [ 313 | "", 319 | " $0", 320 | "" 321 | ], 322 | "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." 323 | }, 324 | "QInput": { 325 | "prefix": "qinput", 326 | "body": [ 327 | "$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 | "" 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 | "", 346 | "\t$0", 347 | "\t
", 348 | "\t\t", 349 | "\t\t", 350 | "\t
", 351 | "" 352 | ], 353 | "description": "The QForm component renders a 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 | "", 359 | "\t$0", 360 | "" 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 | "" 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 | "" 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 | "" 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 | "" 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 | "" 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 | "" 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 | "" 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 | "" 445 | ], 446 | "description": "The QTime component provides a method to input time." 447 | }, 448 | "QDate": { 449 | "prefix": "qdate", 450 | "body": [ 451 | "" 456 | ], 457 | "description": "The QDate component provides a method to input date. Currently it supports Gregorian (default) and Persian calendars." 458 | }, 459 | "QIcon": { 460 | "prefix": "qicon", 461 | "body": [ 462 | "" 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 | "" 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 | "", 482 | "\t
", 483 | "\t\t

Lorem ipsum dolor sit amet consectetur adipisicing elit.

", 484 | "\t
", 485 | "\t", 490 | "" 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 | "", 498 | "\t", 499 | "" 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 | "" 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 | }, 520 | "QLinearProgress": { 521 | "prefix": "qlinearprogress", 522 | "body": [ 523 | "" 530 | ], 531 | "description": "The QLinearProgress component displays a colored loading bar. The bar can either have a determinate progress or an indeterminate animation. It should be used to inform the user that an action is occurring in the background." 532 | }, 533 | "QList": { 534 | "prefix": "qlist", 535 | "body": [ 536 | "", 537 | "\t", 538 | "\t\t", 539 | "\t\t\t", 540 | "\t\t", 541 | "\t\tIcon as avatar", 542 | "\t", 543 | "" 544 | ], 545 | "description": "The QList and QItem are a group of components which can work together to present multiple line items vertically as a single continuous element." 546 | }, 547 | "QItem": { 548 | "prefix": "qitem", 549 | "body": [ 550 | "", 551 | "\t", 552 | "\t\t", 553 | "\t", 554 | "\t", 555 | "\t\tSingle line item", 556 | "\t\tSecondary line text.", 557 | "\t", 558 | "\t", 559 | "\t\t5 min ago", 560 | "\t\t", 561 | "\t", 562 | "" 563 | ], 564 | "description": "Lists can encapsulate Items or Item-like components, for example QCollapsible." 565 | }, 566 | "QMarkupTable": { 567 | "prefix": "qmarkuptable", 568 | "body": [ 569 | "", 570 | "\t", 571 | "\t\t", 572 | "\t\t\t", 573 | "\t\t\t", 574 | "\t\t", 575 | "\t", 576 | "\t", 577 | "\t\t", 578 | "\t\t\t", 579 | "\t\t\t", 580 | "\t\t", 581 | "\t", 582 | "" 583 | ], 584 | "description": "The QMarkupTable is a way for you to simply wrap a native
${1:Dessert}${2:Calories}
${3:Frozen Yogurt}${4:159}
in order to make it look like a Material Design table." 585 | }, 586 | "QMenu": { 587 | "prefix": "qmenu", 588 | "body": [ 589 | "", 590 | "\t", 591 | "\t\t", 592 | "\t\t\tNew tab", 593 | "\t\t", 594 | "\t\t", 595 | "\t\t", 596 | "\t\t\tNew incognito tab", 597 | "\t\t", 598 | "\t", 599 | "" 600 | ], 601 | "description": "The QMenu component is a convenient way to show menus. Goes very well with QList as dropdown content, but it’s by no means limited to it." 602 | }, 603 | "QNoSsr": { 604 | "prefix": "qnossr", 605 | "body": [ 606 | "", 607 | "\t
This won't be rendered on server
", 608 | "" 609 | ], 610 | "description": "The QNoSsr component makes sense only if you are creating a SSR website/app. It avoids rendering its content on the server and leaves that for client only. Useful when you got code that is not isomorphic and can only run on the client side, in a browser." 611 | }, 612 | "QResizeObservable": { 613 | "prefix": "qresizeobservable", 614 | "body": [ 615 | "$0" 616 | ], 617 | "description": "QResizeObserver is a Quasar component that emits a resize event whenever the wrapping DOM element / component (defined as direct parent of QResizeObserver) changes its size (width and/or height)." 618 | }, 619 | "QScrollObservable": { 620 | "prefix": "qscrollobservable", 621 | "body": [ 622 | "" 623 | ], 624 | "description": "QScrollObserver 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." 625 | }, 626 | "QPagination": { 627 | "prefix": "qpagination", 628 | "body": [ 629 | "" 630 | ], 631 | "description": "The QPagination component is available for whenever a pagination system is required. It offers the user a simple UI for moving between items or pages." 632 | }, 633 | "QParallax": { 634 | "prefix": "qparallax", 635 | "body": [ 636 | "", 640 | "\t$0", 641 | "" 642 | ], 643 | "description": "Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion." 644 | }, 645 | "QPopupEdit": { 646 | "prefix": "qpopupedit", 647 | "body": [ 648 | "", 649 | "\t", 650 | "" 651 | ], 652 | "description": "The QPopupEdit component can be used to edit a value “in place”, like for example a cell in QTable. By default, a cell is displayed as a String, then if you are using QPopupEdit and a user clicks/taps on the table cell, a popup will open where the user will be able to edit the value using a textfield." 653 | }, 654 | "QPopupProxy": { 655 | "prefix": "qpopupproxy", 656 | "body": [ 657 | "", 658 | "\t", 659 | "\t\t", 662 | "\t\t${3:You have lost connection to the internet. This app is offline.}", 663 | "\t", 664 | "" 665 | ], 666 | "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." 667 | }, 668 | "QPullToRefresh": { 669 | "prefix": "qpulltorefresh", 670 | "body": [ 671 | "", 672 | "\t$0", 673 | "" 674 | ], 675 | "description": "The QPullToRefresh is a component that allows the user to pull down in order to refresh page content (or retrieve the newest content)." 676 | }, 677 | "QRating": { 678 | "prefix": "qrating", 679 | "body": [ 680 | "" 685 | ], 686 | "description": "Quasar Rating is a Component which allows users to rate items, usually known as “Star Rating”." 687 | }, 688 | "QScrollArea": { 689 | "prefix": "qscrollarea", 690 | "body": [ 691 | "", 692 | "\t
", 693 | "\t\tLorem ipsum dolor sit amet, consectetur adipisicing", 694 | "\t
", 695 | "" 696 | ], 697 | "description": "The QScrollArea component offers a neat way of customizing the scrollbars by encapsulating your content. Think of it as a DOM element which has overflow: auto, but with your own custom styled scrollbar instead of browser’s default one and a few nice features on top." 698 | }, 699 | "QSeparator": { 700 | "prefix": "qseparator", 701 | "body": [ 702 | "" 703 | ], 704 | "description": "The QSeparator component is used to separate sections of text, other components, etc… It creates a colored line across the width of the parent. It can be horizontal or vertical." 705 | }, 706 | "QSlideItem": { 707 | "prefix": "QSlideItem", 708 | "body": [ 709 | "", 710 | "\t", 713 | "\t", 716 | "\t", 717 | "\t\t", 718 | "\t\t\t", 719 | "\t\t", 720 | "\t\t${8:Icons only}", 721 | "\t", 722 | "" 723 | ], 724 | "description": "The QSlideItem component is essentially a QItem with two additional slots (left and right) which allows user to drag the item (through mouse or with the finger on a touch device) to one of the sides in order to apply a specific action." 725 | }, 726 | "QSlideTransition": { 727 | "prefix": "qslidetransition", 728 | "body": [ 729 | "", 730 | "\t
", 731 | "\t\t", 735 | "\t
", 736 | "" 737 | ], 738 | "description": "QSlideTransition slides the DOM element (or component) up or down, based on its visibility: works alongside v-show and v-if on a single element, similar to Vue’s Transition component with the only difference being that it’s not a group transition too (it only applies to one DOM element or component)." 739 | }, 740 | "QSpace": { 741 | "prefix": "qspace", 742 | "body": [ 743 | "" 744 | ], 745 | "description": "The purpose of QSpace (has no props) is to simply fill all available space inside of a flexbox DOM element." 746 | }, 747 | "QSpinner": { 748 | "prefix": "qspinner", 749 | "body": [ 750 | "" 755 | ], 756 | "description": "A Spinner is used to show the user a timely process is currently taking place. It is an important UX feature, which gives the user the feeling the system is continuing to work for longer term activities, like grabbing data from the server or some heavy calculations." 757 | }, 758 | "QSplitter": { 759 | "prefix": "qsplitter", 760 | "body": [ 761 | "", 766 | "\t", 769 | "\t", 772 | "\t", 775 | "" 776 | ], 777 | "description": "The QSplitter component allow containers to be split vertically and/or horizontally through a draggable separator bar." 778 | }, 779 | "QStepper": { 780 | "prefix": "qstepper", 781 | "body": [ 782 | "", 788 | "\t 1}\"", 793 | "\t>", 794 | "\t\tFor each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.", 795 | "\t", 796 | "\t 2}\"", 802 | "\t>", 803 | "\t\tAn ad group contains one or more ads which target a shared set of keywords.", 804 | "\t", 805 | "\t", 811 | "" 812 | ], 813 | "description": "A Stepper conveys progress through numbered steps. Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. It’s usually useful when the user has to follow steps to complete a process." 814 | }, 815 | "QTable": { 816 | "prefix": "qtable", 817 | "body": [ 818 | "" 824 | ], 825 | "description": "QTable is a component that allows you to display data in a tabular manner. It’s generally called a datatable." 826 | }, 827 | "QTabs": { 828 | "prefix": "qtabs", 829 | "body": [ 830 | "", 834 | "\t", 835 | "\t", 836 | "\t", 837 | "" 838 | ], 839 | "description": "Tabs are a way of displaying more information using less window real estate." 840 | }, 841 | "QTabPanels": { 842 | "prefix": "qtabpanels", 843 | "body": [ 844 | "", 845 | "\t", 846 | "\t\t
${3:Mails}
", 847 | "\t\tLorem ipsum dolor sit amet consectetur adipisicing elit.", 848 | "\t", 849 | "\t", 850 | "\t\t
${5:Alarms}
", 851 | "\t\tLorem ipsum dolor sit amet consectetur adipisicing elit.", 852 | "\t", 853 | "\t", 854 | "\t\t
${7:Movies}
", 855 | "\t\tLorem ipsum dolor sit amet consectetur adipisicing elit.", 856 | "\t", 857 | "" 858 | ], 859 | "description": "Tab panels are a way of displaying more information using less window real estate." 860 | }, 861 | "QTimeline": { 862 | "prefix": "qtimeline", 863 | "body": [ 864 | "", 865 | "\t", 866 | "\t\tTimeline heading", 867 | "\t", 868 | "\t", 873 | "\t\t
", 874 | "\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 875 | "\t\t
", 876 | "\t", 877 | "\t", 883 | "\t\t
", 884 | "\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", 885 | "\t\t
", 886 | "\t", 887 | "" 888 | ], 889 | "description": "The QTimeline component displays a list of events in chronological order. It is typically a graphic design showing a long bar labelled with dates alongside itself and usually events. Timelines can use any time scale, depending on the subject and data." 890 | }, 891 | "QToolbar": { 892 | "prefix": "qtoolbar", 893 | "body": [ 894 | "", 895 | "\t", 896 | "\t", 897 | "\t\t${4:Toolbar}", 898 | "\t", 899 | "\t", 900 | "\t", 901 | "" 902 | ], 903 | "description": "QToolbar is a component usually part of Layout Header and Footer, but it can be used anywhere on the page." 904 | }, 905 | "QTooltip": { 906 | "prefix": "qtooltip", 907 | "body": [ 908 | "", 909 | "\t$0", 910 | "" 911 | ], 912 | "description": "The QTooltip component is to be used when you want to offer the user more information about a certain area in your App. When hovering the mouse over the target element (or quickly tapping on mobile platforms), the tooltip will appear." 913 | }, 914 | "QTree": { 915 | "prefix": "qtree", 916 | "body": [ 917 | "" 923 | ], 924 | "description": "Quasar Tree represents a highly configurable component that displays hierarchical data, such as a table of contents in a tree structure." 925 | }, 926 | "QUploader": { 927 | "prefix": "quploader", 928 | "body": [ 929 | "" 936 | ], 937 | "description": "Quasar supplies a way for you to upload files through the QUploader component." 938 | }, 939 | "QVideo": { 940 | "prefix": "qvideo", 941 | "body": [ 942 | "" 945 | ], 946 | "description": "Using the QVideo component makes embedding a video like Youtube easy. It also resizes to fit the container by default." 947 | }, 948 | "QVirtualScroll": { 949 | "prefix": "qvirtualscroll", 950 | "body": [ 951 | "", 956 | "\t", 968 | "" 969 | ], 970 | "description": "The QVirtualScroll component allows you to display only a part of a long list of items and update the visible items as the user scrolls in the container. This has several advantages: only visible items are rendered, so the smallest number of nodes are in the DOM tree at any given point in time and the memory consumption is kept at its lowest." 971 | } 972 | } 973 | --------------------------------------------------------------------------------