Categories
Quasar

Developing Vue Apps with the Quasar Library — Skeleton and Slide Item

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.

Square Skeleton

We can make the skeleton corners square with the square 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 class="q-pa-md">
          <q-skeleton square></q-skeleton>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can set the color of the skeleton by setting the class for the color:

<!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 class="q-pa-md">
          <q-skeleton class="bg-accent" type="circle"></q-skeleton>
          <br />
          <q-skeleton class="bg-teal"></q-skeleton>
          <br />
          <q-skeleton class="bg-orange" animation="pulse-y"></q-skeleton>
          <br />
          <q-skeleton class="bg-indigo"></q-skeleton>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can set the skeleton border styles with our own class:

<!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-skeleton-border {
        border-radius: 10px 0 24px 4px;
        border: 1px solid #aaa;
      }
    </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"
      >
        <div class="q-pa-md">
          <q-skeleton
            width="100px"
            height="50px"
            class="custom-skeleton-border"
          >
          </q-skeleton>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Slide Item

We can add slide items with the q-slide-item component.

It’s a container that does something when we slide it left or right.

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 class="q-pa-md">
          <q-slide-item @left="onLeft" @right="onRight">
            <template v-slot:left>
              <q-icon name="done"></q-icon>
            </template>
            <template v-slot:right>
              <q-icon name="alarm"></q-icon>
            </template>

            <q-item>
              <q-item-section avatar>
                <q-avatar
                  color="primary"
                  text-color="white"
                  icon="bluetooth"
                ></q-avatar>
              </q-item-section>
              <q-item-section>Icons only</q-item-section>
            </q-item>
          </q-slide-item>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {},
        methods: {
          onLeft({ reset }) {
            this.$q.notify("Left action triggered. Resetting in 1 second.");
            this.finalize(reset);
          },

          onRight({ reset }) {
            this.$q.notify("Right action triggered. Resetting in 1 second.");
            this.finalize(reset);
          },

          finalize(reset) {
            this.timer = setTimeout(() => {
              reset();
            }, 1000);
          }
        }
      });
    </script>
  </body>
</html>

We add a slide item with the q-slide-item component.

And we populate the content we want to display when the left slide action is triggered with the left slot.

And we can do the same with the right slot to populate content when the right slide action is triggered.

We listen to the left and right events to listen for each action.

The parameter of the event handlers has the reset method to let us reset the slide item to the initial state.

Conclusion

We can add a placeholder with various styles and we can add slide items to add an item that lets us show something when we slide it.

Leave a Reply

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