Categories
Quasar

Developing Vue Apps with the Quasar Library — Card Content

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.

Card Title

We can add titles inside an image with the q-img component:

<!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-card class="my-card">
          <q-img src="https://cdn.quasar.dev/img/parallax2.jpg" basic>
            <div class="absolute-bottom text-h6">
              Title
            </div>
          </q-img>

          <q-card-section>
            Lorem ipsum
          </q-card-section>
        </q-card>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the title inside the q-img component to show the title.

absolute-bottom show the title at the bottom.

Card with Video

We can add videos 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-card class="my-card">
          <q-video src="https://www.youtube.com/embed/LXb3EKWsInQ"></q-video>

          <q-card-section>
            <div class="text-h6">Our Changing Planet</div>
            <div class="text-subtitle2">by John Doe</div>
          </q-card-section>

          <q-card-section class="q-pt-none">
            Lorem ipsum dolor sit amet
          </q-card-section>
        </q-card>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the q-video component with the YouTube embed URL to embed a YouTube video in the card.

Horizontal Card

Also, we can add cards with a vertical button bar with:

<!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-card class="my-card" flat bordered>
          <q-card-section horizontal>
            <q-img
              class="col"
              src="https://cdn.quasar.dev/img/mountains.jpg"
            ></q-img>

            <q-card-actions vertical class="justify-around q-px-md">
              <q-btn flat round color="red" icon="favorite"></q-btn>
              <q-btn flat round color="accent" icon="bookmark"></q-btn>
              <q-btn flat round color="primary" icon="share"></q-btn>
            </q-card-actions>
          </q-card-section>
        </q-card>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the vertical prop to make the button bar vertical.

And we add the justify-around class to spread the buttons out evenly.

q-px-md adds padding to the button bar.

Expandable Card

We can make an expandable card by using the v-show directive with the q-slide-transition 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"
    />
    <style>
      .my-card {
        width: 100%;
        max-width: 350px;
      }
    </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-card class="my-card" flat bordered>
          <q-img src="https://cdn.quasar.dev/img/parallax2.jpg"></q-img>

          <q-card-section>
            <div class="text-overline text-orange-9">Overline</div>
            <div class="text-h5 q-mt-sm q-mb-xs">Title</div>
            <div class="text-caption text-grey">
              Lorem ipsum dolor sit amet
            </div>
          </q-card-section>

          <q-card-actions>
            <q-btn flat color="dark" label="Share"></q-btn>
            <q-btn flat color="primary" label="Book"></q-btn>

          <q-space></q-space>

          <q-btn
              color="grey"
              round
              flat
              dense
              :icon="expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
              @click="expanded = !expanded"
            >
            </q-btn>
          </q-card-actions>

          <q-slide-transition>
            <div v-show="expanded">
              <q-separator></q-separator>
              <q-card-section class="text-subitle2">
                Lorem ipsum dolor sit amet
              </q-card-section>
            </div>
          </q-slide-transition>
        </q-card>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          expanded: false
        }
      });
    </script>
  </body>
</html>

We add the q-slide-transition component with the div that we want to toggle inside.

This will add the transition when we toggle the div with the q-btn above.

We toggle it by changing the expanded reactive property.

Conclusion

We add cards with various options into our Vue app with Quasar.

Leave a Reply

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