Categories
Quasar

Developing Vue Apps with the Quasar Library — Dropdowns

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.

Dropdown

We can add a dropdown into our Vue app with the q-select 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"
      >
        <div class="q-pa-md">
          <q-select
            outlined
            v-model="model"
            :options="options"
            label="Outlined"
          >
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: ""
        }
      });
    </script>
  </body>
</html>

We add the q-select component with the options prop to add the options.

outlined adds an outline to the dropdown.

Other styles include filled , rounded , borderless , square , and standout .

They can be combined to make different styles.

Dropdown Decorators

We can add icons into our dropdown.

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"
      >
        <div class="q-pa-md">
          <q-select
            outlined
            v-model="model"
            :options="options"
            dense
            :options-dense="options"
          >
            <template v-slot:prepend>
              <q-icon name="event"></q-icon>
            </template>
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: ""
        }
      });
    </script>
  </body>
</html>

We populate the prepend slot with an icon to add one to the left side.

Also, we can add other items. 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"
      >
        <div class="q-pa-md">
          <q-select
            outlined
            v-model="model"
            :options="options"
            dense
            :options-dense="options"
            bottom-slots
          >
            <template v-slot:before>
              <q-icon name="flight_takeoff"></q-icon>
            </template>

            <template v-slot:append>
              <q-icon
                v-if="model !== ''"
                name="close"
                @click.stop="model = ''"
                class="cursor-pointer"
              />
              <q-icon name="search" @click.stop></q-icon>
            </template>

            <template v-slot:hint>
              Field hint
            </template>
          </q-select>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          options: ["apple", "orange", "grape"],
          model: ""
        }
      });
    </script>
  </body>
</html>

The before slot lets us add items to the left of the dropdown outside it.

The append slot lets us add items to the right side inside the dropdown.

The hint slot lets us add a hint when it’s added along with the bottoms-slots prop.

Conclusion

We can add dropdowns with various kinds of addons into our Vue app with the Quasar library.

Leave a Reply

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