Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Quasar

Developing Vue Apps with the Quasar Library — Button Groups

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

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.

Button Group

We can add button groups to group buttons together.

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-btn-group push>
          <q-btn push label="First" icon="timeline"></q-btn>
          <q-btn push label="Second" icon="visibility"></q-btn>
          <q-btn push label="Third" icon="update"></q-btn>
        </q-btn-group>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the buttons inside the q-btn-group components.

push changes the design.

We must use the same design prop on both the q-btn-group and q-btn .

Also, we can spread the buttons across the screen by using the spread 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-btn-group spread>
          <q-btn color="purple" label="First" icon="timeline"></q-btn>
          <q-btn color="purple" label="Second" icon="visibility"></q-btn>
        </q-btn-group>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Also, we can add a dropdown beside the button by writing:

<!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-btn-group rounded>
          <q-btn rounded color="primary" label="One" ></q-btn>

          <q-btn rounded color="primary" label="Two" ></q-btn>

          <q-btn-dropdown
            auto-close
            rounded
            color="primary"
            label="Three"
            split
          >
            <q-list padding style="width: 250px;">
              <q-item clickable>
                <q-item-section avatar>
                  <q-avatar icon="folder" color="purple" text-color="white" ></q-avatar>
                </q-item-section>
                <q-item-section>
                  <q-item-label>Photos</q-item-label>
                  <q-item-label caption>February 22, 2016</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="info" color="amber" ></q-avatar>
                </q-item-section>
              </q-item>

              <q-item clickable>
                <q-item-section avatar>
                  <q-avatar icon="folder" color="purple" text-color="white" ></q-avatar>
                </q-item-section>
                <q-item-section>
                  <q-item-label>Videos</q-item-label>
                  <q-item-label caption>London</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="info" color="amber" ></q-icon>
                </q-item-section>
              </q-item>

              <q-separator inset ></q-separator>
              <q-item-label header>Files</q-item-label>

              <q-item clickable>
                <q-item-section avatar>
                  <q-avatar icon="assignment" color="teal" text-color="white" />
                </q-item-section>
                <q-item-section>
                  <q-item-label>London</q-item-label>
                  <q-item-label caption>March 1st, 2020</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="info" color="amber"></q-icon>
                </q-item-section>
              </q-item>

              <q-item clickable>
                <q-item-section avatar>
                  <q-avatar
                    icon="assignment"
                    color="teal"
                    text-color="white"
                  ></q-avatar>
                </q-item-section>
                <q-item-section>
                  <q-item-label>Paris</q-item-label>
                  <q-item-label caption>January 22nd, 2020</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="info" color="amber"></q-icon>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </q-btn-group>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the q-btn-dropdown component to add a button with a dropdown.

And we add the q-list component to add the dropdown list.

q-separator separates the items in the list.

Conclusion

We can add button groups into our Vue app with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Button Alignment and Sizing

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

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.

Button Alignment

We can align the text in the button by using the align prop.

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-btn
          align="left"
          class="btn-fixed-width"
          color="primary"
          label="Align to left"
        ></q-btn>
        <q-btn
          align="right"
          class="btn-fixed-width"
          color="secondary"
          label="Align to right"
        ></q-btn>
        <q-btn
          align="between"
          class="btn-fixed-width"
          color="accent"
          label="Align between"
          icon="flight_takeoff"
        ></q-btn>
        <q-btn
          align="around"
          class="btn-fixed-width"
          color="brown-5"
          label="Align around"
          icon="lightbulb_outline"
        ></q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We set the align prop to the direction we want to align the content.

We can set the size of a button with the size 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-btn
          v-for="size in sizes"
          :key="size"
          color="primary"
          :size="size"
          :label="`Size ${size}`"
        >
        </q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          sizes: ["xs", "sm", "md", "lg", "xl"]
        }
      });
    </script>
  </body>
</html>

Also, we can change the padding with the padding 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-btn
          v-for="size in sizes"
          :key="size"
          color="primary"
          :padding="size"
          :label="`Padding ${size}`"
        >
        </q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          sizes: ["xs", "sm", "md", "lg", "xl"]
        }
      });
    </script>
  </body>
</html>

We can add a button with a tooltip inside it:

<!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-btn color="primary" label="With Tooltip" class="q-mt-md">
          <q-tooltip content-class="bg-accent">I'm a tooltip</q-tooltip>
        </q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

If we hover over the button, we see the tooltip displayed.

Also, we can set the button to be full width with the full-width 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"
    />
  </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-btn color="black" class="full-width" label="Full-width"></q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Conclusion

We can change button size and padding and add tooltips into our Vue app with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Button Customization

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

yellow labrador puppies in green plastic container

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 Button Color

We can set custom button colors.

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-btn
          style="background: #ff0080; color: white;"
          label="Fuchsia"
        ></q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We set the style prop to change the styles.

Also, we can add icons 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-btn color="primary" icon="mail" label="Mail"> </q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We set the icon prop to add an icon on the left side of the button.

Also, we can add a round button with the round 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-btn round color="primary" icon="shopping_cart"></q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can add other content into buttons. For example, we can add avatars:

<!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-btn round>
          <q-avatar size="42px">
            <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
          </q-avatar>
        </q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

Long labels can be truncated by writing:

<!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-btn color="primary" style="width: 200px;">
          <div class="ellipsis">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </div>
        </q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add a div with class ellipsis to truncate the text and add the ellipsis after it.

And we set the width in the style attribute to set the width of the button so that the text can be truncated.

Conclusion

We can customize buttons in various ways in our Vue app with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Breadcrumbs and Button

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

white and brown long coated small dog lying on white textile

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.

Breadcrumbs

Quasar comes with the q-breadcrumbs component to let us add breadcrumbs.

To use it, 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-breadcrumbs>
          <q-breadcrumbs-el label="Home"></q-breadcrumbs-el>
          <q-breadcrumbs-el label="Components"></q-breadcrumbs-el>
          <q-breadcrumbs-el label="Breadcrumbs"></q-breadcrumbs-el>
        </q-breadcrumbs>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the q-breadcrumbs components as the container.

And we add the breadcrumb entries with the q-breadecrumbs-el component.

The label is the text we display.

We can add icons with the icon 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-breadcrumbs>
          <q-breadcrumbs-el label="Home"></q-breadcrumbs-el>
          <q-breadcrumbs-el
            label="Components"
            icon="widgets"
          ></q-breadcrumbs-el>
          <q-breadcrumbs-el label="Breadcrumbs"></q-breadcrumbs-el>
        </q-breadcrumbs>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We can also add it inside a q-toolbar :

<!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-toolbar>
          <q-btn flat round dense icon="assignment_ind" />

           <q-toolbar-title>Quasar</q-toolbar-title>

           <q-btn flat round dense icon="sim_card" class="q-mr-xs" />
          <q-btn flat round dense icon="gamepad" />
        </q-toolbar>
        <q-toolbar inset>
          <q-breadcrumbs>
            <q-breadcrumbs-el label="Home"></q-breadcrumbs-el>
            <q-breadcrumbs-el
              label="Components"
              icon="widgets"
            ></q-breadcrumbs-el>
            <q-breadcrumbs-el
              label="Breadcrumbs"
            ></q-breadcrumbs-el> </q-breadcrumbs
        ></q-toolbar>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the q-toolbar component with the q-breadcrumbs component inside.

The inset makes the breadcrumb component align inside the toolbar.

Button

We can add buttons into our Vue app with the q-btn 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-btn color="white" text-color="black" label="Standard"></q-btn>
        <q-btn color="primary" label="Primary"></q-btn>
        <q-btn color="secondary" label="Secondary"></q-btn>
        <q-btn color="amber" glossy label="Amber"></q-btn>
        <q-btn color="brown-5" label="Brown 5"></q-btn>
        <q-btn color="deep-orange" glossy label="Deep Orange"></q-btn>
        <q-btn color="purple" label="Purple"></q-btn>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the q-btn components to add the buttons.

color sets the background color.

label sets the button text.

glossy makes the button glossy.

Conclusion

We can add breadcrumbs and buttons into our Vue app with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Top Bars

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

closeup photo of yellow Labrador retriever puppy

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.

Bar

We can add a top bar with the q-bar component.

For instance, we can add a Windows-style top bar by writing:

<!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-bar>
          <div class="cursor-pointer">File</div>
          <div class="cursor-pointer">Edit</div>
          <div class="cursor-pointer gt-xs">View</div>
          <div class="cursor-pointer gt-xs">Window</div>
          <div class="cursor-pointer">Help</div>
          <q-space></q-space>
          <q-btn dense flat icon="minimize"></q-btn>
          <q-btn dense flat icon="crop_square"></q-btn>
          <q-btn dense flat icon="close"></q-btn>
        </q-bar>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the q-bar component with the divs to add the top bar items.

We have the cursor-pointer to change the cursor style to a pointer when we hover over the elements.

q-space separates the divs from the buttons.

We also have:

<link
      href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
      rel="stylesheet"
      type="text/css"
    />

to add the Font Awesome icons.

We can add a Mac OS style top bar by writing:

<!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-bar>
          <div class="text-weight-bold">
            App
          </div>
          <div class="cursor-pointer gt-md">File</div>
          <div class="cursor-pointer gt-md">Edit</div>
          <div class="cursor-pointer gt-md">View</div>
          <div class="cursor-pointer gt-md">Window</div>
          <div class="cursor-pointer gt-md">Help</div>
          <q-space></q-space>
          <q-btn dense flat icon="airplay" class="gt-xs"></q-btn>
          <q-btn dense flat icon="battery_charging_full"></q-btn>
          <q-btn dense flat icon="wifi"></q-btn>
          <div>9:41</div>
          <q-btn dense flat icon="search"></q-btn>
          <q-btn dense flat icon="list"></q-btn>
        </q-bar>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We just change the icons to the Apple styled ones.

To add an Android-style top bar, 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://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-bar dense class="bg-black text-white">
          <div>mobi-net</div>
          <q-icon name="email"></q-icon>
          <q-space></q-space>
          <q-icon name="bluetooth"></q-icon>
          <q-icon name="signal_wifi_4_bar"></q-icon>
          <q-icon name="signal_cellular_4_bar"></q-icon>
          <div class="gt-xs">100%</div>
          <q-icon name="battery_full"></q-icon>
          <div>10:00AM</div>
        </q-bar>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We add the q-icon components directly instead of adding the icons into buttons.

And we can add an iOS-style top bar by writing:

<!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">
      <div class="q-pa-md q-gutter-sm">
        <q-bar dense class="bg-teal text-white">
          <q-icon name="signal"></q-icon>
          <div>net</div>
          <div>4G</div>
          <q-space></q-space>
          <q-icon name="wifi"></q-icon>
          <q-icon name="near_me"></q-icon>
          <div>100%</div>
          <q-icon name="batteryFull"></q-icon>
        </q-bar>
      </div>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {}
      });
    </script>
  </body>
</html>

We just switch out the icons for the iOS ones.

Conclusion

We can add a top bar with various styles easily into our Vue app with Quasar.