Skip to content

Commit 190c47f

Browse files
rstoenescurstoenescu
committed
feat(docs): Some Quasar Plugins pages
1 parent 4cf38a9 commit 190c47f

File tree

9 files changed

+409
-327
lines changed

9 files changed

+409
-327
lines changed

‎docs/src/examples/AppFullscreen/Basic.vue‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-btn
4+
color="secondary"
5+
@click="$q.fullscreen.toggle()"
6+
:icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
7+
:label="$q.fullscreen.isActive ? 'Exit Fullscreen' : 'Go Fullscreen'"
8+
/>
9+
</div>
10+
</template>

‎docs/src/examples/AppVisibility/Basic.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<p>
4+
Switch to another browser tab or app then come back here to see some changes.
5+
</p>
6+
7+
<q-markup-table v-if="eventList.length > 0">
8+
<tbody>
9+
<tr v-for="evt in eventList" :key="evt.timestamp">
10+
<td>{{ evt.timestamp }}</td>
11+
<td>{{ evt.label }}</td>
12+
</tr>
13+
</tbody>
14+
</q-markup-table>
15+
</div>
16+
</template>
17+
18+
<script>
19+
function pad (number) {
20+
return (number < 10 ? '0' : '') + number
21+
}
22+
23+
export default {
24+
data () {
25+
return {
26+
eventList: []
27+
}
28+
},
29+
30+
watch: {
31+
'$q.appVisible' (state) {
32+
const date = new Date()
33+
this.eventList.unshift({
34+
timestamp: pad(date.getHours()) + ':' +
35+
pad(date.getMinutes()) + ':' + pad(date.getSeconds()) + '.' +
36+
date.getMilliseconds(),
37+
label: `App became ${state ? 'visible' : 'hidden'}`
38+
})
39+
}
40+
}
41+
}
42+
</script>

‎docs/src/examples/Notify/Basic.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-btn color="purple" @click="showNotif" label="Show Notification" />
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
methods: {
10+
showNotif () {
11+
this.$q.notify({
12+
message: 'John pinged you',
13+
color: 'purple'
14+
})
15+
}
16+
}
17+
}
18+
</script>

‎docs/src/examples/Notify/Positioning.vue‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<template>
2+
<div class="q-pa-md q-gutter-sm column items-center">
3+
<div>
4+
<div class="row q-gutter-sm">
5+
<q-btn round size="sm" color="secondary" @click="showNotif('top-left')">
6+
<q-icon name="arrow_back" class="rotate-45" />
7+
</q-btn>
8+
<q-btn round size="sm" color="tertiary" @click="showNotif('top')">
9+
<q-icon name="arrow_upward" />
10+
</q-btn>
11+
<q-btn round size="sm" color="secondary" @click="showNotif('top-right')">
12+
<q-icon name="arrow_upward" class="rotate-45" />
13+
</q-btn>
14+
</div>
15+
</div>
16+
17+
<div>
18+
<div class="row q-gutter-sm">
19+
<div>
20+
<q-btn round size="sm" color="tertiary" @click="showNotif('left')">
21+
<q-icon name="arrow_back" />
22+
</q-btn>
23+
</div>
24+
<div>
25+
<q-btn round size="sm" color="tertiary" @click="showNotif('center')">
26+
<q-icon name="fullscreen_exit" />
27+
</q-btn>
28+
</div>
29+
<div>
30+
<q-btn round size="sm" color="tertiary" @click="showNotif('right')">
31+
<q-icon name="arrow_forward" />
32+
</q-btn>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<div>
38+
<div class="row q-gutter-sm">
39+
<div>
40+
<q-btn round size="sm" color="secondary" @click="showNotif('bottom-left')">
41+
<q-icon name="arrow_forward" class="rotate-135" />
42+
</q-btn>
43+
</div>
44+
<div>
45+
<q-btn round size="sm" color="tertiary" @click="showNotif('bottom')">
46+
<q-icon name="arrow_downward" />
47+
</q-btn>
48+
</div>
49+
<div>
50+
<q-btn round size="sm" color="secondary" @click="showNotif('bottom-right')">
51+
<q-icon name="arrow_forward" class="rotate-45" />
52+
</q-btn>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</template>
58+
59+
<script>
60+
const alerts = [
61+
{ color: 'negative', message: 'Woah! Danger! You are getting good at this!', icon: 'report_problem' },
62+
{ message: 'You need to know about this!', icon: 'warning' },
63+
{ message: 'Wow! Nice job!', icon: 'thumb_up' },
64+
{ color: 'teal', message: 'Quasar is cool! Right?', icon: 'tag_faces' },
65+
{ color: 'purple', message: 'Jim just pinged you', avatar: 'https://cdn.quasar-framework.org/img/boy-avatar.png' },
66+
{ multiLine: true, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quisquam non ad sit assumenda consequuntur esse inventore officia. Corrupti reiciendis impedit vel, fugit odit quisquam quae porro exercitationem eveniet quasi.' }
67+
]
68+
69+
export default {
70+
methods: {
71+
showNotif (position) {
72+
const { color, textColor, multiLine, icon, message, avatar } = alerts[ Math.floor(Math.random(alerts.length) * 10) % alerts.length ]
73+
const random = Math.random() * 100
74+
75+
const twoActions = random > 70
76+
const buttonColor = color ? 'white' : void 0
77+
78+
this.$q.notify({
79+
color,
80+
textColor,
81+
icon: random > 30 ? icon : null,
82+
message,
83+
position,
84+
avatar,
85+
multiLine,
86+
actions: twoActions
87+
? [
88+
{ label: 'Reply', color: buttonColor, handler: () => console.log('wooow') },
89+
{ label: 'Dismiss', color: 'yellow', handler: () => console.log('wooow') }
90+
]
91+
: (random > 40
92+
? [ { label: 'Reply', color: buttonColor, handler: () => console.log('wooow') } ]
93+
: null
94+
),
95+
timeout: Math.random() * 5000 + 3000
96+
})
97+
}
98+
}
99+
}
100+
</script>

‎docs/src/pages/quasar-plugins/app-fullscreen.md‎

Lines changed: 45 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,67 @@
11
---
2-
title: Docs
2+
title: Fullscreen Plugin
33
---
4+
There are times when you want your website or App to run in fullscreen.
5+
Quasar makes it easy by wrapping the [Web Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API).
46

5-
[Internal Link](/docs), [External Link](https://vuejs.org)
7+
::: warning
8+
Please note that the behavior is different depending on the platform the code is running on, due to the fact that there isn't a fixed Web standard for Web Fullscreen API yet.
9+
:::
610

7-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non laoreet eros. `token` Morbi non ipsum ac purus dignissim rutrum. Nulla nec ante congue, rutrum tortor facilisis, aliquet ligula. Fusce vitae odio elit. `/quasar.conf.js`
11+
## Installation
12+
<doc-installation plugins="AppFullscreen" />
813

9-
## Heading 2
10-
### Heading 3
11-
#### Heading 4
12-
##### Heading 5
13-
###### Heading 6
14+
## Usage
15+
::: tip
16+
For an exhaustive list of properties and methods, please check out the API section.
17+
:::
1418

15-
```
16-
const m = 'lala'
17-
```
19+
``` js
20+
// outside of a Vue file
21+
import { AppFullscreen } from 'quasar'
1822

19-
```html
20-
<div>
21-
<q-btn @click="doSomething">Do something</q-btn>
22-
<q-icon name="alarm" />
23-
</div>
24-
```
23+
// Requesting fullscreen mode:
24+
AppFullscreen.request()
2525

26-
```vue
27-
<template>
28-
<!-- you define your Vue template here -->
29-
</template>
26+
// Exiting fullscreen mode:
27+
AppFullscreen.exit()
28+
```
3029

31-
<script>
32-
// This is where your Javascript goes
33-
// to define your Vue component, which
34-
// can be a Layout, a Page or your own
35-
// component used throughout the app.
30+
``` js
31+
// inside of a Vue file
3632

37-
export default {
38-
//
39-
}
40-
</script>
33+
// Requesting fullscreen mode:
34+
this.$q.fullscreen.request()
4135

42-
<style>
43-
/* This is where your CSS goes */
44-
</style>
36+
// Exiting fullscreen mode:
37+
this.$q.fullscreen.exit()
4538
```
4639

47-
| Table Example | Type | Description |
48-
| --- | --- | --- |
49-
| infinite | Boolean | Infinite slides scrolling |
50-
| size | String | Thickness of loading bar. |
51-
52-
> Something...
53-
54-
::: tip
55-
Some tip
56-
:::
40+
<doc-example title="AppFullscreen" file="AppFullscreen/Basic" />
5741

5842
::: warning
59-
Some tip
60-
:::
61-
62-
::: danger
63-
Some tip
64-
:::
43+
On some phones this will have little effect:
44+
* For example, on Samsung S4, when App goes into fullscreen, the top bar will slide up but still remain on screen.
45+
* On Nexus phones, on the other hand, like Nexus 5, Android navigation buttons and top bar disappear completely.
6546

66-
::: warning CUSTOM TITLE
67-
Some tip
47+
It all depends on the Web Fullscreen API support of the platform the code is running on.
6848
:::
6949

70-
* Something
71-
* something
72-
* else
73-
* Back
74-
* wee
50+
### Watching for fullscreen changes
7551

76-
## Installation
77-
<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />
52+
``` vue
53+
<template>...</template>
7854
79-
## Usage
80-
<doc-example title="Standard" file="QBtn/Standard" />
55+
<script>
56+
export default {
57+
watch: {
58+
'$q.fullscreen.isActive' (val) {
59+
console.log(val ? 'In fullscreen now' : 'Exited fullscreen')
60+
}
61+
}
62+
}
63+
</script>
64+
```
8165

8266
## API
83-
<doc-api file="QTh" />
67+
<doc-api file="AppFullscreen" />

‎docs/src/pages/quasar-plugins/app-visibility.md‎

Lines changed: 13 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,23 @@
11
---
2-
title: Docs
2+
title: App Visibility
33
---
4+
Quasar makes use of the Web [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) which lets you know when a website/app is visible or in focus.
45

5-
[Internal Link](/docs), [External Link](https://vuejs.org)
6-
7-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non laoreet eros. `token` Morbi non ipsum ac purus dignissim rutrum. Nulla nec ante congue, rutrum tortor facilisis, aliquet ligula. Fusce vitae odio elit. `/quasar.conf.js`
8-
9-
## Heading 2
10-
### Heading 3
11-
#### Heading 4
12-
##### Heading 5
13-
###### Heading 6
14-
15-
```
16-
const m = 'lala'
17-
```
18-
19-
```html
20-
<div>
21-
<q-btn @click="doSomething">Do something</q-btn>
22-
<q-icon name="alarm" />
23-
</div>
24-
```
25-
26-
```vue
27-
<template>
28-
<!-- you define your Vue template here -->
29-
</template>
6+
## Installation
7+
<doc-installation plugins="AppVisibility" scrollable />
308

31-
<script>
32-
// This is where your Javascript goes
33-
// to define your Vue component, which
34-
// can be a Layout, a Page or your own
35-
// component used throughout the app.
9+
## Usage
10+
``` js
11+
// outside of a Vue file
12+
import { AppVisibility } from 'quasar'
3613

37-
export default {
38-
//
39-
}
40-
</script>
14+
(Boolean) AppVisibility.appVisible
4115

42-
<style>
43-
/* This is where your CSS goes */
44-
</style>
16+
// inside of a Vue file
17+
(Boolean) this.$q.appVisible
4518
```
4619

47-
| Table Example | Type | Description |
48-
| --- | --- | --- |
49-
| infinite | Boolean | Infinite slides scrolling |
50-
| size | String | Thickness of loading bar. |
51-
52-
> Something...
53-
54-
::: tip
55-
Some tip
56-
:::
57-
58-
::: warning
59-
Some tip
60-
:::
61-
62-
::: danger
63-
Some tip
64-
:::
65-
66-
::: warning CUSTOM TITLE
67-
Some tip
68-
:::
69-
70-
* Something
71-
* something
72-
* else
73-
* Back
74-
* wee
75-
76-
## Installation
77-
<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />
78-
79-
## Usage
80-
<doc-example title="Standard" file="QBtn/Standard" />
20+
<doc-example title="AppVisibility" file="AppVisibility/Basic" />
8121

8222
## API
83-
<doc-api file="QTh" />
23+
<doc-api file="AppVisibility" />

0 commit comments

Comments
 (0)