Skip to content

Commit ded45be

Browse files
rstoenescurstoenescu
committed
feat(docs): Update QFab page to latest v1.9 specs
1 parent 41af600 commit ded45be

File tree

10 files changed

+431
-1
lines changed

10 files changed

+431
-1
lines changed

‎docs/src/assets/menu.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -782,6 +782,7 @@ const components = [
782782
},
783783
{
784784
name: 'Floating Action Button',
785+
badge: 'update',
785786
path: 'floating-action-button'
786787
},
787788
{

‎docs/src/examples/QFab/ExternalLabel.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div class="q-pa-md" style="padding-top: 48px; padding-bottom: 220px">
3+
<div>
4+
<q-fab
5+
v-model="fab1"
6+
label="Actions"
7+
label-position="top"
8+
external-label
9+
color="purple"
10+
icon="keyboard_arrow_right"
11+
direction="right"
12+
>
13+
<q-fab-action external-label label-position="top" color="primary" @click="onClick" icon="mail" label="Email" />
14+
<q-fab-action external-label label-position="top" color="secondary" @click="onClick" icon="alarm" label="Alarm" />
15+
<q-fab-action external-label label-position="top" color="orange" @click="onClick" icon="airplay" label="Airplay" />
16+
<q-fab-action external-label label-position="top" color="accent" @click="onClick" icon="room" label="Map" />
17+
</q-fab>
18+
</div>
19+
20+
<div class="q-mt-md">
21+
<q-fab
22+
v-model="fab2"
23+
label="Actions"
24+
external-label
25+
vertical-actions-align="left"
26+
color="purple"
27+
icon="keyboard_arrow_down"
28+
direction="down"
29+
>
30+
<q-fab-action external-label color="primary" @click="onClick" icon="mail" label="Email" />
31+
<q-fab-action external-label color="secondary" @click="onClick" icon="alarm" label="Alarm" />
32+
<q-fab-action external-label color="orange" @click="onClick" icon="airplay" label="Airplay" />
33+
<q-fab-action external-label color="accent" @click="onClick" icon="room" label="Map" />
34+
</q-fab>
35+
</div>
36+
</div>
37+
</template>
38+
39+
<script>
40+
export default {
41+
data () {
42+
return {
43+
fab1: true,
44+
fab2: true
45+
}
46+
},
47+
48+
methods: {
49+
onClick () {
50+
// console.log('Clicked on a fab action')
51+
}
52+
}
53+
}
54+
</script>

‎docs/src/examples/QFab/ExternalLabelStyled.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div class="q-pa-md" style="padding-top: 48px; padding-bottom: 220px">
3+
<div>
4+
<q-fab
5+
v-model="fab1"
6+
label="Actions"
7+
label-position="top"
8+
label-class="bg-grey-3 text-purple"
9+
external-label
10+
color="purple"
11+
icon="keyboard_arrow_right"
12+
direction="right"
13+
>
14+
<q-fab-action label-class="bg-grey-3 text-grey-8" external-label label-position="top" color="primary" @click="onClick" icon="mail" label="Email" />
15+
<q-fab-action label-class="bg-grey-3 text-grey-8" external-label label-position="top" color="secondary" @click="onClick" icon="alarm" label="Alarm" />
16+
<q-fab-action label-class="bg-grey-3 text-grey-8" external-label label-position="top" color="orange" @click="onClick" icon="airplay" label="Airplay" />
17+
<q-fab-action label-class="bg-grey-3 text-grey-8" external-label label-position="top" color="accent" @click="onClick" icon="room" label="Map" />
18+
</q-fab>
19+
</div>
20+
21+
<div class="q-mt-md">
22+
<q-fab
23+
v-model="fab2"
24+
label="Actions"
25+
external-label
26+
label-class="bg-grey-3 text-purple"
27+
vertical-actions-align="left"
28+
color="purple"
29+
icon="keyboard_arrow_down"
30+
direction="down"
31+
>
32+
<q-fab-action label-class="bg-grey-3 text-grey-8" external-label color="primary" @click="onClick" icon="mail" label="Email" />
33+
<q-fab-action label-class="bg-grey-3 text-grey-8" external-label color="secondary" @click="onClick" icon="alarm" label="Alarm" />
34+
<q-fab-action label-class="bg-grey-3 text-grey-8" external-label color="orange" @click="onClick" icon="airplay" label="Airplay" />
35+
<q-fab-action label-class="bg-grey-3 text-grey-8" external-label color="accent" @click="onClick" icon="room" label="Map" />
36+
</q-fab>
37+
</div>
38+
</div>
39+
</template>
40+
41+
<script>
42+
export default {
43+
data () {
44+
return {
45+
fab1: true,
46+
fab2: true
47+
}
48+
},
49+
50+
methods: {
51+
onClick () {
52+
// console.log('Clicked on a fab action')
53+
}
54+
}
55+
}
56+
</script>

‎docs/src/examples/QFab/ExternalLabelToggling.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="q-pa-md" style="padding-bottom: 220px">
3+
<q-toggle v-model="hideLabels" label="Hide labels" />
4+
5+
<div style="padding-top: 48px;">
6+
<q-fab
7+
v-model="fab1"
8+
label="Actions"
9+
label-position="top"
10+
external-label
11+
color="purple"
12+
icon="keyboard_arrow_right"
13+
direction="right"
14+
:hide-label="hideLabels"
15+
>
16+
<q-fab-action :hide-label="hideLabels" external-label label-position="top" color="primary" @click="onClick" icon="mail" label="Email" />
17+
<q-fab-action :hide-label="hideLabels" external-label label-position="top" color="secondary" @click="onClick" icon="alarm" label="Alarm" />
18+
<q-fab-action :hide-label="hideLabels" external-label label-position="top" color="orange" @click="onClick" icon="airplay" label="Airplay" />
19+
<q-fab-action :hide-label="hideLabels" external-label label-position="top" color="accent" @click="onClick" icon="room" label="Map" />
20+
</q-fab>
21+
</div>
22+
23+
<div class="q-mt-md">
24+
<q-fab
25+
v-model="fab2"
26+
label="Actions"
27+
external-label
28+
vertical-actions-align="left"
29+
color="purple"
30+
icon="keyboard_arrow_down"
31+
direction="down"
32+
:hide-label="hideLabels"
33+
>
34+
<q-fab-action :hide-label="hideLabels" external-label color="primary" @click="onClick" icon="mail" label="Email" />
35+
<q-fab-action :hide-label="hideLabels" external-label color="secondary" @click="onClick" icon="alarm" label="Alarm" />
36+
<q-fab-action :hide-label="hideLabels" external-label color="orange" @click="onClick" icon="airplay" label="Airplay" />
37+
<q-fab-action :hide-label="hideLabels" external-label color="accent" @click="onClick" icon="room" label="Map" />
38+
</q-fab>
39+
</div>
40+
</div>
41+
</template>
42+
43+
<script>
44+
export default {
45+
data () {
46+
return {
47+
fab1: true,
48+
fab2: true,
49+
hideLabels: false
50+
}
51+
},
52+
53+
methods: {
54+
onClick () {
55+
// console.log('Clicked on a fab action')
56+
}
57+
}
58+
}
59+
</script>

‎docs/src/examples/QFab/InternalLabel.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div class="q-pa-md" style="padding-bottom: 220px">
3+
<div>
4+
<q-fab
5+
v-model="fab1"
6+
label="Actions"
7+
label-position="left"
8+
color="purple"
9+
icon="keyboard_arrow_right"
10+
direction="right"
11+
>
12+
<q-fab-action color="primary" @click="onClick" icon="mail" label="Email" />
13+
<q-fab-action color="secondary" @click="onClick" icon="alarm" label="Alarm" />
14+
<q-fab-action color="orange" @click="onClick" icon="airplay" label="Airplay" />
15+
<q-fab-action color="accent" @click="onClick" icon="room" label="Map" />
16+
</q-fab>
17+
</div>
18+
19+
<div class="q-mt-md">
20+
<q-fab
21+
v-model="fab2"
22+
label="Actions"
23+
vertical-actions-align="left"
24+
color="purple"
25+
icon="keyboard_arrow_down"
26+
direction="down"
27+
>
28+
<q-fab-action color="primary" @click="onClick" icon="mail" label="Email" />
29+
<q-fab-action color="secondary" @click="onClick" icon="alarm" label="Alarm" />
30+
<q-fab-action color="orange" @click="onClick" icon="airplay" label="Airplay" />
31+
<q-fab-action color="accent" @click="onClick" icon="room" label="Map" />
32+
</q-fab>
33+
</div>
34+
</div>
35+
</template>
36+
37+
<script>
38+
export default {
39+
data () {
40+
return {
41+
fab1: true,
42+
fab2: true
43+
}
44+
},
45+
46+
methods: {
47+
onClick () {
48+
// console.log('Clicked on a fab action')
49+
}
50+
}
51+
}
52+
</script>

‎docs/src/examples/QFab/InternalLabelToggling.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div class="q-pa-md" style="padding-bottom: 240px">
3+
<q-toggle v-model="hideLabels" label="Hide labels" />
4+
5+
<div class="q-mt-md">
6+
<q-fab
7+
v-model="fab1"
8+
label="Actions"
9+
color="purple"
10+
icon="keyboard_arrow_right"
11+
direction="right"
12+
:hide-label="hideLabels"
13+
>
14+
<q-fab-action :hide-label="hideLabels" color="primary" @click="onClick" icon="mail" label="Email" />
15+
<q-fab-action :hide-label="hideLabels" color="secondary" @click="onClick" icon="alarm" label="Alarm" />
16+
<q-fab-action :hide-label="hideLabels" color="orange" @click="onClick" icon="airplay" label="Airplay" />
17+
<q-fab-action :hide-label="hideLabels" color="accent" @click="onClick" icon="room" label="Map" />
18+
</q-fab>
19+
</div>
20+
21+
<div class="q-mt-md row justify-center">
22+
<q-fab
23+
v-model="fab2"
24+
label="Actions"
25+
label-position="bottom"
26+
glossy
27+
color="purple"
28+
icon="keyboard_arrow_down"
29+
direction="down"
30+
:hide-label="hideLabels"
31+
>
32+
<q-fab-action :hide-label="hideLabels" color="primary" @click="onClick" icon="mail" label="Email" />
33+
<q-fab-action :hide-label="hideLabels" color="secondary" @click="onClick" icon="alarm" label="Alarm" />
34+
<q-fab-action :hide-label="hideLabels" color="orange" @click="onClick" icon="airplay" label="Airplay" />
35+
<q-fab-action :hide-label="hideLabels" color="accent" @click="onClick" icon="room" label="Map" />
36+
</q-fab>
37+
</div>
38+
</div>
39+
</template>
40+
41+
<script>
42+
export default {
43+
data () {
44+
return {
45+
fab1: true,
46+
fab2: true,
47+
hideLabels: false
48+
}
49+
},
50+
51+
methods: {
52+
onClick () {
53+
// console.log('Clicked on a fab action')
54+
}
55+
}
56+
}
57+
</script>

‎docs/src/examples/QFab/SquareStyle.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div class="q-pa-md" style="padding-top: 48px; padding-bottom: 220px">
3+
<div>
4+
<q-fab
5+
v-model="fab1"
6+
color="primary"
7+
glossy
8+
icon="keyboard_arrow_right"
9+
direction="right"
10+
>
11+
<q-fab-action square external-label label-position="top" color="primary" @click="onClick" icon="mail" label="Email" />
12+
<q-fab-action square external-label label-position="top" color="secondary" @click="onClick" icon="alarm" label="Alarm" />
13+
<q-fab-action square external-label label-position="top" color="orange" @click="onClick" icon="airplay" label="Airplay" />
14+
<q-fab-action square external-label label-position="top" color="accent" @click="onClick" icon="room" label="Map" />
15+
</q-fab>
16+
</div>
17+
18+
<div class="q-mt-md row justify-center">
19+
<q-fab
20+
v-model="fab2"
21+
square
22+
vertical-actions-align="right"
23+
color="secondary"
24+
glossy
25+
icon="keyboard_arrow_down"
26+
direction="down"
27+
>
28+
<q-fab-action square color="primary" @click="onClick" icon="mail" label="Email" label-position="left" />
29+
<q-fab-action square color="secondary" @click="onClick" icon="alarm" label="Alarm" label-position="left" />
30+
<q-fab-action glossy square color="orange" @click="onClick" icon="airplay" label="Airplay" label-position="left" />
31+
<q-fab-action square color="accent" @click="onClick" icon="room" label="Map" label-position="left" />
32+
</q-fab>
33+
</div>
34+
</div>
35+
</template>
36+
37+
<script>
38+
export default {
39+
data () {
40+
return {
41+
fab1: true,
42+
fab2: true
43+
}
44+
},
45+
46+
methods: {
47+
onClick () {
48+
// console.log('Clicked on a fab action')
49+
}
50+
}
51+
}
52+
</script>

0 commit comments

Comments
 (0)