feat(docs): Add QCarousel fullscreen example

Author: rstoenescu

docs/src/examples/QCarousel/Fullscreen.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="q-pa-md">
+    <q-carousel
+      swipeable
+      animated
+      arrows
+      v-model="slide"
+      :fullscreen.sync="fullscreen"
+      infinite
+    >
+      <q-carousel-slide :name="1" img-src="https://cdn.quasar-framework.org/img/mountains.jpg" />
+      <q-carousel-slide :name="2" img-src="https://cdn.quasar-framework.org/img/parallax1.jpg" />
+      <q-carousel-slide :name="3" img-src="https://cdn.quasar-framework.org/img/parallax2.jpg" />
+      <q-carousel-slide :name="4" img-src="https://cdn.quasar-framework.org/img/quasar.jpg" />
+
+      <template v-slot:control>
+        <q-carousel-control
+          position="bottom-right"
+          :offset="[18, 18]"
+        >
+          <q-btn
+            push round dense color="white" text-color="primary"
+            :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
+            @click="fullscreen = !fullscreen"
+          />
+        </q-carousel-control>
+      </template>
+    </q-carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      slide: 1,
+      fullscreen: false
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/carousel.md

@@ -43,6 +43,9 @@ Don't use the property `navigation` with `thumbnails` as it supercedes and thumb
 ### Controls
 <doc-example title="Controls" file="QCarousel/Controls" />
 
+### Fullscreen
+<doc-example title="Fullscreen" file="QCarousel/Fullscreen" />
+
 ## QCarousel API
 <doc-api file="QCarousel" />
 

quasar/dev/components/components/carousel.vue

@@ -161,11 +161,25 @@
       arrows
       thumbnails
       infinite
+      :fullscreen.sync="full"
     >
       <q-carousel-slide :name="0" img-src="https://cdn.quasar-framework.org/img/mountains.jpg" />
       <q-carousel-slide :name="1" img-src="https://cdn.quasar-framework.org/img/parallax1.jpg" />
       <q-carousel-slide :name="2" img-src="https://cdn.quasar-framework.org/img/parallax2.jpg" />
       <q-carousel-slide :name="3" img-src="https://cdn.quasar-framework.org/img/quasar.jpg" />
+
+      <template v-slot:control>
+        <q-carousel-control
+          position="top-right"
+          :offset="[38, 38]"
+        >
+          <q-btn
+            push round dense color="white" text-color="primary"
+            :icon="full ? 'fullscreen_exit' : 'fullscreen'"
+            @click="full = !full"
+          />
+        </q-carousel-control>
+      </template>
     </q-carousel>
 
     <p class="caption">
@@ -203,6 +217,7 @@
 export default {
   data: () => ({
     fullscreen: false,
+    full: false,
     slide: 0,
     slide2: 1,
     slide3: 1,

quasar/src/components/carousel/carousel.styl

@@ -1,4 +1,5 @@
 .q-carousel
+  background-color inherit // needed for fullscreen
   height 400px
 
   &__slide