Category: Quasar

Quasar

Developing Vue Apps with the Quasar Library — Custom Chat Messages

Post author By John Au-Yeung
Post date November 24, 2020
No Comments on Developing Vue Apps with the Quasar Library — Custom Chat Messages

short-coated white and beige puppy on the floor

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Chat Message with Avatars

We can add chat messages with avatars.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message
            name="me"
            avatar="https://cdn.quasar.dev/img/avatar1.jpg"
            :text="['hey, how are you?']"
            sent
          >
          </q-chat-message>
          <q-chat-message
            name="Mary"
            avatar="https://cdn.quasar.dev/img/avatar2.jpg"
            :text="['doing fine']"
          >
          </q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We set the avatar prop to the URL of the avatar photo.

Chat Message with Time Stamp

The stamp prop lets us add a timestamp to the chat message:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message
            name="me"
            avatar="https://cdn.quasar.dev/img/avatar1.jpg"
            :text="['hey, how are you?']"
            sent
            stamp="5 minutes ago"
          >
          </q-chat-message>
          <q-chat-message
            name="Mary"
            avatar="https://cdn.quasar.dev/img/avatar2.jpg"
            :text="['doing fine']"
            stamp="3 minutes ago"
          >
          </q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can add the label prop to add the label:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message label="Sunday, 20th"> </q-chat-message>
          <q-chat-message
            name="me"
            avatar="https://cdn.quasar.dev/img/avatar1.jpg"
            :text="['hey, how are you?']"
            sent
            stamp="5 minutes ago"
          >
          </q-chat-message>
          <q-chat-message
            name="Mary"
            avatar="https://cdn.quasar.dev/img/avatar2.jpg"
            :text="['doing fine']"
            stamp="3 minutes ago"
          >
          </q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can change the background color of the chat message with the bg-color prop:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message
            name="me"
            avatar="https://cdn.quasar.dev/img/avatar1.jpg"
            :text="['hey, how are you?']"
            sent
            bg-color="amber-1"
          >
          </q-chat-message>
          <q-chat-message
            name="Mary"
            avatar="https://cdn.quasar.dev/img/avatar2.jpg"
            :text="['doing fine']"
            text-color="white"
            bg-color="primary"
          >
          </q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Conclusion

We can add chat messages with various options into our Vue app with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Custom Chat Messages

Post author By John Au-Yeung
Post date November 22, 2020
No Comments on Developing Vue Apps with the Quasar Library — Custom Chat Messages

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Chat Message with Avatars

We can add chat messages with avatars.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message
            name="me"
            avatar="https://cdn.quasar.dev/img/avatar1.jpg"
            :text="['hey, how are you?']"
            sent
          >
          </q-chat-message>
          <q-chat-message
            name="Mary"
            avatar="https://cdn.quasar.dev/img/avatar2.jpg"
            :text="['doing fine']"
          >
          </q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We set the avatar prop to the URL of the avatar photo.

Chat Message with Time Stamp

The stamp prop lets us add a timestamp to the chat message:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message
            name="me"
            avatar="https://cdn.quasar.dev/img/avatar1.jpg"
            :text="['hey, how are you?']"
            sent
            stamp="5 minutes ago"
          >
          </q-chat-message>
          <q-chat-message
            name="Mary"
            avatar="https://cdn.quasar.dev/img/avatar2.jpg"
            :text="['doing fine']"
            stamp="3 minutes ago"
          >
          </q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can add the label prop to add the label:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message label="Sunday, 20th"> </q-chat-message>
          <q-chat-message
            name="me"
            avatar="https://cdn.quasar.dev/img/avatar1.jpg"
            :text="['hey, how are you?']"
            sent
            stamp="5 minutes ago"
          >
          </q-chat-message>
          <q-chat-message
            name="Mary"
            avatar="https://cdn.quasar.dev/img/avatar2.jpg"
            :text="['doing fine']"
            stamp="3 minutes ago"
          >
          </q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can change the background color of the chat message with the bg-color prop:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message
            name="me"
            avatar="https://cdn.quasar.dev/img/avatar1.jpg"
            :text="['hey, how are you?']"
            sent
            bg-color="amber-1"
          >
          </q-chat-message>
          <q-chat-message
            name="Mary"
            avatar="https://cdn.quasar.dev/img/avatar2.jpg"
            :text="['doing fine']"
            text-color="white"
            bg-color="primary"
          >
          </q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Conclusion

We can add chat messages with various options into our Vue app with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Carousel Controls and Chat Messages

Post author By John Au-Yeung
Post date November 22, 2020
No Comments on Developing Vue Apps with the Quasar Library — Carousel Controls and Chat Messages

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Custom Carousel Controls

We can add custom carousel controls by populating the control slot.

To do this, we write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-carousel
          swipeable
          animated
          v-model="slide"
          :autoplay="autoplay"
          ref="carousel"
          infinite
        >
          <q-carousel-slide
            :name="1"
            img-src="https://cdn.quasar.dev/img/mountains.jpg"
          >
          </q-carousel-slide>
          <q-carousel-slide
            :name="2"
            img-src="https://cdn.quasar.dev/img/parallax1.jpg"
          >
          </q-carousel-slide>
          <q-carousel-slide
            :name="3"
            img-src="https://cdn.quasar.dev/img/parallax2.jpg"
          >
          </q-carousel-slide>
          <template v-slot:control>
            <q-carousel-control
              position="top-right"
              :offset="[18, 18]"
              class="text-white rounded-borders"
              style="background: rgba(0, 0, 0, 0.3); padding: 4px 8px;"
            >
              <q-toggle
                dense
                dark
                color="orange"
                v-model="autoplay"
                label="Auto Play"
              >
              </q-toggle>
            </q-carousel-control>

            <q-carousel-control
              position="bottom-right"
              :offset="[18, 18]"
              class="q-gutter-xs"
            >
              <q-btn
                push
                round
                dense
                color="orange"
                text-color="black"
                icon="arrow_left"
                @click="$refs.carousel.previous()"
              >
              </q-btn>
              <q-btn
                push
                round
                dense
                color="orange"
                text-color="black"
                icon="arrow_right"
                @click="$refs.carousel.next()"
              >
              </q-btn>
            </q-carousel-control>
          </template>
        </q-carousel>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: 1,
          autoplay: false
        }
      });
    </script>
  </body>
</html>

We add the position prop to position the control slot.

offset moves the slot to the left and down.

We use the class to set the colors.

We have the q-toggle component to set the autoplay reactive property to set the autoplay prop.

And we have the q-btn components to let us navigate the slides with the previous and next methods.

Chat Message

We can add the q-chat-message component to add chat message bubbles.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message :text="['hey, how are you?']" sent></q-chat-message>
          <q-chat-message :text="['doing fine, how r you?']"></q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: 1,
          autoplay: false
        }
      });
    </script>
  </body>
</html>

We set the text prop to an array of strings.

The sent prop is added to the message of the chat message of the sender.

Also, we can add the name prop to add the name of the person that sent the message:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <div style="width: 100%; max-width: 400px;">
          <q-chat-message
            :text="['hey, how are you?']"
            sent
            name="me"
          ></q-chat-message>
          <q-chat-message
            :text="['doing fine, how r you?']"
            name="James"
          ></q-chat-message>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: 1,
          autoplay: false
        }
      });
    </script>
  </body>
</html>

Conclusion

We can add carousels with custom controls and add chat messages into our Vue app with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Image and Video Carousels

Post author By John Au-Yeung
Post date November 22, 2020
No Comments on Developing Vue Apps with the Quasar Library — Image and Video Carousels

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Carousel with Image Captions

We can add carousels with image captions.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <style>
      .custom-caption {
        text-align: center;
        padding: 12px;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-carousel arrows animated v-model="slide" height="400px">
          <q-carousel-slide
            name="first"
            img-src="https://cdn.quasar.dev/img/mountains.jpg"
          >
            <div class="absolute-bottom custom-caption">
              <div class="text-h2">First stop</div>
              <div class="text-subtitle1">Mountains</div>
            </div>
          </q-carousel-slide>
          <q-carousel-slide
            name="second"
            img-src="https://cdn.quasar.dev/img/parallax1.jpg"
          >
            <div class="absolute-bottom custom-caption">
              <div class="text-h2">Second stop</div>
              <div class="text-subtitle1">City</div>
            </div>
          </q-carousel-slide>
          <q-carousel-slide
            name="third"
            img-src="https://cdn.quasar.dev/img/parallax2.jpg"
          >
            <div class="absolute-bottom custom-caption">
              <div class="text-h2">Third stop</div>
              <div class="text-subtitle1">Bridge</div>
            </div>
          </q-carousel-slide>
        </q-carousel>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: "first"
        }
      });
    </script>
  </body>
</html>

We add the div with the absolute-bottom class to add the text to the bottom of the slide.

Video Slides

We can add sides with video with the q-video component.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-carousel animated v-model="slide" infinite>
          <q-carousel-slide name="dog1">
            <q-video
              class="absolute-full"
              src="https://www.youtube.com/embed/uhXH7W5ESRc"
            >
            </q-video>
          </q-carousel-slide>

          <q-carousel-slide name="dog2">
            <q-video
              class="absolute-full"
              src="https://www.youtube.com/embed/1HygThMLzGs"
            >
            </q-video>
          </q-carousel-slide>

          <q-carousel-slide name="dog3">
            <q-video
              class="absolute-full"
              src="https://www.youtube.com/embed/AcL0MeVZIxM"
            >
            </q-video>
          </q-carousel-slide>
        </q-carousel>

        <div class="row justify-center">
          <q-btn-toggle
            glossy
            v-model="slide"
            :options="[
                { label: 'Dog 1', value: 'dog1' },
                { label: 'Dog 2', value: 'dog2' },
                { label: 'Dog 3', value: 'dog3' }
              ]"
          />
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: "dog1"
        }
      });
    </script>
  </body>
</html>

We add the q-video into the q-carousel-slide to add the video into the slide.

Slides with Thumbnails

To add photo carousels with thumbnails,. we can add the thumbnails prop:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-carousel swipeable animated v-model="slide" thumbnails infinite>
          <q-carousel-slide
            :name="1"
            img-src="https://cdn.quasar.dev/img/mountains.jpg"
          >
          </q-carousel-slide>
          <q-carousel-slide
            :name="2"
            img-src="https://cdn.quasar.dev/img/parallax1.jpg"
          >
          </q-carousel-slide>
          <q-carousel-slide
            :name="3"
            img-src="https://cdn.quasar.dev/img/parallax2.jpg"
          >
          </q-carousel-slide>
        </q-carousel>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: 1
        }
      });
    </script>
  </body>
</html>

Conclusion

We can add various kinds of carousels easily into our Vue app with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Customize Carousel

Post author By John Au-Yeung
Post date November 22, 2020
No Comments on Developing Vue Apps with the Quasar Library — Customize Carousel

white puppy in basket in macro photography

Quasar is a popular Vue UI library for developing good looking Vue apps.

In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.

Vertical Carousel

We can make a carousel vertical with the vertical prop:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-carousel
          v-model="slide"
          vertical
          transition-prev="scale"
          transition-next="scale"
          swipeable
          animated
          control-color="white"
          navigation
          padding
          arrows
          height="300px"
          class="bg-primary text-white shadow-1 rounded-borders"
        >
          <q-carousel-slide name="style" class="column no-wrap flex-center">
            <q-icon name="style" size="56px"></q-icon>
            <div class="q-mt-md text-center">
              {{ lorem }}
            </div>
          </q-carousel-slide>
          <q-carousel-slide name="tv" class="column no-wrap flex-center">
            <q-icon name="live_tv" size="56px"></q-icon>
            <div class="q-mt-md text-center">
              {{ lorem }}
            </div>
          </q-carousel-slide>
          <q-carousel-slide name="layers" class="column no-wrap flex-center">
            <q-icon name="layers" size="56px"></q-icon>
            <div class="q-mt-md text-center">
              {{ lorem }}
            </div>
          </q-carousel-slide>
          <q-carousel-slide name="map" class="column no-wrap flex-center">
            <q-icon name="terrain" size="56px"></q-icon>
            <div class="q-mt-md text-center">
              {{ lorem }}
            </div>
          </q-carousel-slide>
        </q-carousel>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: "style",
          lorem: "Lorem ipsum"
        }
      });
    </script>
  </body>
</html>

Image Carousel

We can add image slides by setting the img-src prop to the q-carousel-slide component.

For instance, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-carousel animated v-model="slide" arrows navigation infinite>
          <q-carousel-slide
            :name="1"
            img-src="https://cdn.quasar.dev/img/mountains.jpg"
          ></q-carousel-slide>
          <q-carousel-slide
            :name="2"
            img-src="https://cdn.quasar.dev/img/parallax1.jpg"
          ></q-carousel-slide>
          <q-carousel-slide
            :name="3"
            img-src="https://cdn.quasar.dev/img/parallax2.jpg"
          ></q-carousel-slide>
          <q-carousel-slide
            :name="4"
            img-src="https://cdn.quasar.dev/img/quasar.jpg"
          ></q-carousel-slide>
        </q-carousel>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: 1
        }
      });
    </script>
  </body>
</html>

We can also add multi-image slides with the q-img components.

For example, we can write:

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body class="body--dark">
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
    <div id="q-app">
      <q-layout
        view="lHh Lpr lFf"
        container
        style="height: 100vh;"
        class="shadow-2 rounded-borders"
      >
        <q-carousel animated v-model="slide" arrows navigation infinite>
          <q-carousel-slide :name="1" class="column no-wrap">
            <div
              class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
            >
              <q-img
                class="rounded-borders col-6 full-height"
                src="https://i.picsum.photos/id/1/500/500.jpg?hmac=6vo7WkHURh9CWfdf144ASqEaPNcbj2PHJK3UgGH24lM"
              >
              </q-img>
              <q-img
                class="rounded-borders col-6 full-height"
                src="https://cdn.quasar.dev/img/parallax1.jpg"
              >
              </q-img>
            </div>
          </q-carousel-slide>
          <q-carousel-slide :name="2" class="column no-wrap">
            <div
              class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
            >
              <q-img
                class="rounded-borders col-6 full-height"
                src="https://i.picsum.photos/id/2/500/500.jpg?hmac=vAjkLR4Y91mPCNgWRVLc2dF_fuBnLtQTdj9gHrBZz2M"
              >
              </q-img>
              <q-img
                class="rounded-borders col-6 full-height"
                src="https://cdn.quasar.dev/img/quasar.jpg"
              >
              </q-img>
            </div>
          </q-carousel-slide>
          <q-carousel-slide :name="3" class="column no-wrap">
            <div
              class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
            >
              <q-img
                class="rounded-borders col-6 full-height"
                src="https://cdn.quasar.dev/img/cat.jpg"
              >
              </q-img>
              <q-img
                class="rounded-borders col-6 full-height"
                src="https://cdn.quasar.dev/img/linux-avatar.png"
              >
              </q-img>
            </div>
          </q-carousel-slide>
          <q-carousel-slide :name="4" class="column no-wrap">
            <div
              class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
            >
              <q-img
                class="rounded-borders col-6 full-height"
                src="https://cdn.quasar.dev/img/material.png"
              >
              </q-img>
              <q-img
                class="rounded-borders col-6 full-height"
                src="https://cdn.quasar.dev/img/donuts.png"
              >
              </q-img>
            </div>
          </q-carousel-slide>
        </q-carousel>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: 1
        }
      });
    </script>
  </body>
</html>

We change the image size with the col-6 class.

Conclusion

We can customize Quasar carousels in our Vue app.