15 |
16 | ## Supporting Quasar
17 | Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome [backers](https://github.com/rstoenescu/quasar-framework/blob/dev/backers.md). If you'd like to join them, check out [Quasar Framework's Patreon campaign](https://www.patreon.com/quasarframework).
18 |
19 | ## Documentation
20 |
21 | Head on to the Quasar Framework official website: [http://quasar-framework.org](http://quasar-framework.org)
22 |
23 | ## Community Forum
24 |
25 | Head on to the official community forum: [http://forum.quasar-framework.org](http://forum.quasar-framework.org)
26 |
27 | ## Quasar Repositories
28 |
29 | * [Quasar Framework](https://github.com/quasarframework/quasar)
30 | * [Quasar CLI](https://github.com/quasarframework/quasar-cli)
31 | * [Quasar Play App](https://github.com/quasarframework/quasar-play)
32 |
33 | ## Contributing
34 |
35 | I'm excited if you want to contribute to Quasar under any form (report bugs, write a plugin, fix an issue, write a new feature).
36 |
37 | ### Issue Reporting Guidelines
38 |
39 | **Please use the appropriate Github repo to report issues. See "Related Components" above.** For example, a bug related to CLI should be reported to the CLI repo, one related to build issues to Quasar Framework Templates repo and so on.
40 |
41 | - The issue list of the repository is **exclusively** for bug reports and feature requests. For anything else please use the [Community Forum](http://forum.quasar-framework.org).
42 |
43 | - Try to search for your issue, it may have already been fixed in the development branch or it may have a resolution.
44 |
45 | - Check if the issue is reproducible with the latest stable version of Quasar. If you are using a pre-release, please indicate the specific version you are using.
46 |
47 | - It is **required** that you clearly describe the steps necessary to reproduce the issue you are running into. Issues with no clear repro steps will not be triaged. If an issue labeled "need repro" receives no further input from the issue author for more than 5 days, it will be closed.
48 |
49 | - If your issue is resolved but still open, don’t hesitate to close it. In case you found a solution by yourself, it could be helpful to explain how you fixed it.
50 |
51 | Read more [here](http://quasar-framework.org/guide/contributing.html).
52 |
53 | ## License
54 |
55 | Copyright (c) 2016 Razvan Stoenescu
56 |
57 | [MIT License](http://en.wikipedia.org/wiki/MIT_License)
58 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "quasar-play",
3 | "version": "0.17.19",
4 | "description": "Quasar Play for Quasar Framework",
5 | "productName": "Quasar Play",
6 | "cordovaId": "com.quasarframework.quasarplay",
7 | "author": "Razvan Stoenescu 18 | We value your privacy, and our Privacy Policy aims to explain how your privacy is 19 | protected while using the Quasar Play app. 20 |
21 | 22 |What personal information is collected from people using Quasar Play?
23 |24 | None, period. We don't collect, transmit or store any personal information or any other 25 | data. Quasar Play is fully functional without requiring any information about the user. 26 |
27 | 28 |What information about my device is collected when I use Quasar Play?
29 |30 | It is not required to grant the app any device permissions in order to use Quasar Play, 31 | however use of the QR code-scanning option requires allowing the app access your device's 32 | camera. This is the only device permission the app will ever request, and it is the only 33 | purpose for which the device's camera will ever be used by Quasar Play. 34 |
35 | 36 |Third-party disclosure
37 |38 | We do not sell, trade, or otherwise transfer any data to outside parties, nor do we include 39 | any commercial offers for third-party products or services at any time. 40 |
41 | 42 |Changes to Privacy Policy
43 |44 | This Privacy Policy may be updated from time to time for any reason. You should check this 45 | Privacy Policy periodically for any changes, as continued use is deemed approval of all changes. 46 |
47 | 48 |Contact Us
49 |50 | If you have any questions about this Privacy Policy, please contact us at 51 | razvan.stoenescu@gmail.com. 52 |
53 |57 | Left Panel has intended scroll 58 |
59 |75 | Right Panel has intended scroll 76 |
77 |
47 |
4 | 
8 |
Sorry, nothing here...(404)
10 |4 | 5 | This view contains two drawer panels. One on left and one on right. 6 | Click 7 | Tap on menu buttons from top-left 8 | or top-right corners of the screen, or swipe the 9 | Drawers into view from the left or right edge of screen. 10 | 11 |12 |
13 | The Drawer Panel (also known as a Sidebar) is the element on the left 14 | side (or right side) of your screen, usually used for Navigation, which gets 15 | hidden on smaller screens and is shown alongside the Page content on wide 16 | enough screens. Breakpoints are configurable in JS. 17 |
18 |19 | Drawer Panels can use a QScrollArea for enhancing design and behavior of 20 | scrollbar. Furthermore, due to some Layout features, they can scroll along 21 | the content should you wish to. Play with the Layout to see this in effect. 22 |
23 |24 | Drawers can be activated by swiping them into view from the edge of the screen 25 | or by clicking/tapping on menu buttons. Their position is based on how you 26 | structure the layout template. You can, for instance, display a Drawer on right 27 | side of screen on big screens but swipe them from left on smaller screens. 28 | It's up to you and where you place the Drawer HTML tag. 29 |
30 |4 | Click 5 | Tap 6 | on each inline FABs below. 7 | The one that opens on the right also has a backdrop. 8 |
9 | 10 |39 | There's also the absolute positioned one on bottom 40 | right of screen which maintains position on Page scroll. 41 | It has a click/tap event injected on itself when expanded. 42 |
43 | 44 |
4 | Notice the eight buttons positioned along the border of the page.
5 |
6 | If you will play with the Layout, you'll see that their position
7 | changes to accomodate page resize, drawer panels appearing / dissapearing,
8 | or header/footer going in & out of view or changing its size.
9 |
45 | Page has intended scroll 46 |
47 |"Slide" Transition
5 | 6 |7 | Click 8 | Tap 9 | on the Toggle below to see the transition in action. 10 |
11 |
12 |
17 | 
21 |
Examples of group buttons. Endless possibilities.
5 |Suffixes (none, xs, sm, md, lg, xl) do not refer to device screen size, but to the size of gutter between elements.
5 | 6 |gutter-{{ type }}
8 |Horizontal classes available. Example: 'gutter-x-sm':
16 |Vertical classes available. Example: 'gutter-y-sm':
25 |Mix and match. Example: 'gutter-x-lg gutter-y-sm':
34 |QInput example (6 rows on xs screens and 4 rows on sm+)
43 |Standard shadows
4 |Shadows pointing up
6 |Inset Shadow
8 |Button toggles are alternatives to Radio controls. Support for acting as checkbox will follow soon.
5 |
6 | Standard
7 |
8 |
Configure it with regular button props
24 |Readonly state
69 |Disable state
83 |In a field
97 |On a dark background
117 |
5 | Click
6 | Tap
7 | on Chips Textbox below to start adding or removing Chips.
8 |
9 | The Backspace key removes previously entered Chip if textfield is empty.
10 |
Works great with Autocomplete so you might want to check its page.
12 |53 | Lazy input 54 |
55 | 56 |Hide underline
67 |Read only
70 |Disabled
74 |Error/Warning states
78 |In a Field
85 |In a List
96 |On dark background
106 |Hex model
7 |Hex (+ alpha) model
11 |RGB model
15 |RGBA model
19 |
24 | Lazy input
25 |
26 |
On Dark Background
34 |Inside Field
39 |Readonly
49 |Disable
59 |
5 | Date
6 |
7 |
8 | Click
9 | Tap
10 | on header labels to change month, day or year.
11 |
12 |
13 | Set month, day and years by
14 |
15 | clicking. On a mobile device you need to pan to change date or time.
16 |
17 |
18 | panning. On a desktop device you need to click to change date or time.
19 |
20 |
21 |
25 | Time
26 |
27 |
28 |
29 | Set hours and minutes by clicking and dragging (or simply clicking)
30 |
31 |
32 | Set hours and minutes by panning (or simply tapping)
33 |
34 | inside of the clock.
35 |
36 |
Time 24hr format
40 |Date & Time
43 |Minimal Datetime Interface (No header)
47 |Minimal Date Interface (No header)
50 |Minimal Date Interface - Default View Year (No header)
53 |Minimal Time Interface (No header)
56 |On a dark background
60 |Forcing Monday as first day of week (Changing Quasar I18n automatically configures first day of the week)
63 |Forcing Saturday as first day of week (Changing Quasar I18n automatically configures first day of the week)
66 |Disabled state
69 |Readonly state
72 |Min & max
75 |Standard
5 |With Step
18 |Styling
27 |
64 | Lazy input
65 |
66 |
Readonly state
80 |Disabled state
91 |Inside Field
101 |On a dark background
114 |Standard
5 |With label
10 |With label on left side
15 |Readonly
20 |Disabled
25 |As Option Group in a Field
30 |On a dark background
48 |In a list
75 |Readonly State
15 |Disabled State
18 |In a Field
21 |On a dark background
30 |Works great with Autocomplete so you might want to check its page.
5 |
19 | Lazy input
20 |
21 |
In a Field
29 |Hide the underline
47 |Readonly state
50 |Disable state
54 |Error/Warning states
58 |On a dark background
65 |Pagination, sorting & filtering happens on the server
4 |
5 |
6 |
7 | Use sidebar to browse through demos, which showcase only a few of the Quasar components and features.
8 |
9 | For a full list, visit the documentation website.
10 |
{{ category.title }}
23 |5 | Scroll down (best using scrollbar instead of mouse scroll 6 | if on desktop) to see Parallax in action. 7 |
8 | 9 |{{ loremipsum }}
10 |{{ loremipsum }}
18 |{{ loremipsum }}
31 |{{ loremipsum }}
39 |With Component
5 |With HTML Markup
10 |5 | Based on the device you are using to view this, Quasar detects the following: 6 |
7 | 8 || Property | 12 |Value | 13 |
|---|---|
| {{ prop }} | 19 |{{ value }} | 20 |
25 | Your device {{ touch }} touch capability. 26 |
27 |Basic
4 |With links and custom icon separator
11 |With separator as scoped slot
19 |With different alignment
27 |
5 |
6 | Right click on the colored area below.
7 |
8 | On a real mobile device it works different by opening a minimized Modal triggered by a long tap.
9 |
10 |
11 | Long Tap on the colored area below (not on header though).
12 |
13 | On a desktop it works different by opening a Popover.
14 |
15 |
17 | 18 | Works with any elements you want. It doesn't have to be a List. 19 | 20 |21 |
22 | 23 | On a desktop browser user 24 | 25 | 26 | User 27 | 28 | can dismiss the Context Menu 29 | by hitting the <ESCAPE> key. 30 |
31 | 32 |With buttons
4 |With inputbox
11 |With maximum number of links & custom color
19 |With no ellipses
28 |With boundary links
39 |With direction links
49 |With custom interval
59 |Mix and match
66 |5 | Pull down to refresh on the content below. 6 | On desktop it works by dragging the content down. 7 |
8 | 9 |
10 |
Tab Panes below (shadow, animated, swipeable)
5 |Tab Panes below (inverted)
16 |Tab Panes above
27 |Tab Panes above (inverted)
38 |Keeping tabs alive (Vue won't destroy content on Tab selection change)
49 |5 | Toolbars are mainly used in Layout headers and footers, but they can be used 6 | in your Page view too. 7 |
8 | 9 |28 | They come in all colors. 29 |
30 | 31 |70 | And inverted: 71 |
72 | 73 |Simplest example, with a label only.
5 |With label and icon
8 |With avatar
11 |Using props, with subtitle.
16 |With Action(s)
24 |
55 | Combining alerts with animations.
56 |
Default types of alerts
97 |Click on names & calories cells.
5 |Ajax Bar component captures Ajax calls automatically. This page here triggers events manually for demonstrating purposes only.
6 | 7 |
13 | Try out some combinations for Ajax Bar.
14 |
Color is customizable too through 'color' prop.
15 |
5 | Click or tap below, to see the innerLoading component work with a div. 6 | It is simulating a delay from a server reply. 7 |
8 |4 | Notify the user something is going on under the covers. 5 |
6 |15 | ...with a custom spinner, colors and size. 16 |
17 |21 | Change Message while Being Displayed 22 |
23 |5 | Click 6 | Tap 7 | on progress bars to change their binded value. 8 | 9 | On a real mobile device the Progress bars 10 | are much thinner by default. 11 | 12 |
13 | 14 |19 | Hover over them to see their names 20 |
21 | 22 |
34 | Default Theme Spinner:
35 |
5 | Scroll down
8 | A circular button is set to appear after scrolling 500px.
9 |
10 | After another 500px another element will appear on the left.
11 |
Keep scrolling...
35 |Scroll down to see it in action.
5 | 6 |
9 |
5 | Please scroll down to see the image have a short bounce effect when being visible for first time. 6 | This effect is just for demoing that something happens when target comes into view. 7 |
8 |{{ loremipsum }}
9 | 10 |Scroll Fire below. Reload page to see the bounce effect again.
11 |
12 |
13 |
{{ loremipsum }}
16 |Main Colors
4 |Full Palette
22 |5 | Click 6 | Tap 7 | on the area below to see it in action. 8 |
9 | 10 | 11 |Headings
4 |Weights
18 |Blockquotes
28 |29 |32 | 33 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
30 | Someone famous for Quasar Framework 31 |
34 |37 | 38 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
35 | Someone famous for Quasar Framework 36 |
Definition Lists - Vertical
39 |Definition Lists - Horizontal
50 |
5 | Click and hold with your mouse
6 | Touch and hold
7 | on the area below to see it in action.
8 |
9 | Notice that on touch capable devices the scrolling is not blocked.
10 |
9 | {{ info }}
18 | Configuring to trigger after custom time (in this case 3s):
25 |{{ infoExtended }}
31 |
5 | Click then pan in a direction with your mouse
6 | Touch and pan in a direction
7 | on the area below to see it in action.
8 |
9 | Page scrolling is prevented, but you can opt out if you wish.
10 |
{{ info }}
18 |
35 | Panning works both with a mouse or a native touch action.
36 |
37 | You can also capture pan to certain directions (any) only as you'll see below.
38 |
41 | Example on capturing only horizontal panning.
42 |
43 | Notice that on touch capable devices the scrolling is automatically not blocked, since
44 | we are only capturing horizontally.
45 |
{{ infoHorizontal }}
52 | 65 | Example on capturing only vertically panning. 66 | Page scrolling is prevented, but you can opt out if you wish. 67 |
68 |{{ infoVertical }}
74 | For desktops, you can configure to avoid capturing mouse pans if you wish.
89 |5 | Swipe with your mouse 6 | Swipe 7 | on the area below to see it in action. 8 |
9 |{{ info }}
15 |
28 | Swipe works both with a mouse or a native touch action.
29 |
You can also capture swipe to certain directions (any) only as you'll see below.
30 |
Example on capturing only swipe to right:
33 |{{ infoRight }}
39 | Example on capturing only swipe up and right:
47 |{{ infoCustom }}
53 | For desktops, you can configure to avoid capturing mouse swipes if you wish.
64 |5 | Click 6 | Tap 7 | to switch between fullscreen mode and default mode. 8 |
9 | 10 |
11 |
20 | On some phones this will have little effect: 21 |
22 |4 | Switch to another 5 | 6 | tab in your browser 7 | 8 | 9 | App 10 | 11 | then come back here to see Visibility in action. 12 |
13 | 14 || {{ evt.timestamp }} | 18 |{{ evt.label }} | 19 |