Categories
Quasar

Developing Vue Apps with the Quasar Library — Page and Progress Bar

Spread the love

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.

Page Scroller

We can add a scrollable page component with the q-page-container component.

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: 400px;"
        class="shadow-2 rounded-borders"
      >
        <q-header elevated>
          <q-toolbar>
            <q-avatar>
              <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
            </q-avatar>
            <q-toolbar-title>
              App
            </q-toolbar-title>
          </q-toolbar>
        </q-header>

        <q-page-container>
          <q-page padding>
            <p v-for="n in 15" :key="n">
              Lorem ipsum
            </p>

            <q-page-scroller
              position="bottom-right"
              :scroll-offset="150"
              :offset="[18, 18]"
            >
              <q-btn fab icon="keyboard_arrow_up" color="accent" />
            </q-page-scroller>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {
          drawerLeft: true
        },
        methods: {}
      });
    </script>
  </body>
</html>

We have the q-layout component that’s used as the layout container.

The q-header component adds a header.

q-toolbar adds a toolbar.

q-page-container has the page container. q-page holds the page content.

q-page-scroller watches the scroll position and shows the q-btn is we scrolled to the bottom of the page.

The position is the position of the scroller component.

Also, we can add q-page-scroller to the top with position set to top :

<!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: 400px;"
        class="shadow-2 rounded-borders"
      >
        <q-header elevated>
          <q-toolbar>
            <q-avatar>
              <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
            </q-avatar>
            <q-toolbar-title>
              App
            </q-toolbar-title>
          </q-toolbar>
        </q-header>

<q-page-container>
          <q-page padding>
            <p v-for="n in 15" :key="n">
              Lorem ipsum
            </p>

<q-page-scroller
              expand
              position="top"
              :scroll-offset="150"
              :offset="[0, 0]"
            >
              <div
                class="col cursor-pointer q-pa-sm bg-accent text-white text-center"
              >
                Scroll back up
              </div>
            </q-page-scroller>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {
          drawerLeft: true
        },
        methods: {}
      });
    </script>
  </body>
</html>

Ajax Bar

We can show the progress of an ajax request with the Ajax bar component.

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-ajax-bar
          ref="bar"
          position="bottom"
          color="accent"
          size="10px"
          skip-hijack
        />
      </q-layout>
    </div>

    <script>
      new Vue({
        el: "#q-app",
        data: {},
        methods: {
          trigger() {
            const bar = this.$refs.bar;
            bar.start();

            this.timer = setTimeout(() => {
              if (this.$refs.bar) {
                bar.stop();
              }
            }, Math.random() * 3000 + 1000);
          }
        },
        mounted() {
          this.trigger();
        }
      });
    </script>
  </body>
</html>

We add the q-ajax-bar component to add the loading bar.

position set to bottom puts the bar at the bottom.

The trigger method shows the bar with the bar.start method.

And the setTimeout callback calls bar.stop to stop the bar from displaying.

Conclusion

We can add a scrollable page and loading bar into our Vue app with the Quasar library.

Leave a Reply

Your email address will not be published. Required fields are marked *