Category: Quasar

Quasar

Developing Vue Apps with the Quasar Library — Slider

Post author By John Au-Yeung
Post date December 5, 2020
No Comments on Developing Vue Apps with the Quasar Library — Slider

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.

Slider

Quasar comes with a slider component to let users select a number from it.

To add it, we add the q-slider 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"
      >
        <div class="q-pa-md">
          <q-badge color="secondary">
            {{ standard }}
          </q-badge>

          <q-slider
            v-model="standard"
            :min="0"
            :max="50"
            color="green"
          ></q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          standard: 0
        }
      });
    </script>
  </body>
</html>

We add the q-slider component with the v-model directive to bind the selected value to the standard reactive property.

min has the min value allowed. max has the max value allowed.

The color prop changes the color of the slider button and the bar.

The vertical prop makes the slider vertical:

<!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 row justify-around">
          {{ standard }}

          <q-slider
            v-model="standard"
            :min="0"
            :max="50"
            color="green"
            vertical
          ></q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          standard: 0
        }
      });
    </script>
  </body>
</html>

We can set the step that the slider snaps to with the step 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-badge color="secondary">
            {{ model }}
          </q-badge>
          <q-slider v-model="model" :step="50"> </q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: 0
        }
      });
    </script>
  </body>
</html>

Now the slider will snap to the nearest increment of 50.

We can also round to the nearest floating-point number:

<!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-badge color="secondary">
            {{ model }}
          </q-badge>
          <q-slider v-model="model" :min="0" :max="1.5" :step="0.1"> </q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: 0
        }
      });
    </script>
  </body>
</html>

We can show a label that displays the selected number with the label 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-slider label v-model="model" :min="0" :max="1.5" :step="0.1">
          </q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: 0
        }
      });
    </script>
  </body>
</html>

Conclusion

We can add a slider into our Vue app with Quasar’s q-slider component to let users pick a number.

Quasar

Developing Vue Apps with the Quasar Library — Options Group Settings

Post author By John Au-Yeung
Post date December 5, 2020
No Comments on Developing Vue Apps with the Quasar Library — Options Group Settings

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.

Inline Option Group

We can display the option group inline with the inline 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-option-group
            v-model="group"
            inline
            :options="options"
            color="primary"
          >
          </q-option-group>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          group: "op1",
          options: [
            {
              label: "Option 1",
              value: "op1"
            },
            {
              label: "Option 2",
              value: "op2"
            },
            {
              label: "Option 3",
              value: "op3"
            }
          ]
        }
      });
    </script>
  </body>
</html>

Dense Option Group

We can make the options display more densely with the dense 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-option-group
            v-model="group"
            dense
            :options="options"
            color="primary"
          >
          </q-option-group>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          group: "op1",
          options: [
            {
              label: "Option 1",
              value: "op1"
            },
            {
              label: "Option 2",
              value: "op2"
            },
            {
              label: "Option 3",
              value: "op3"
            }
          ]
        }
      });
    </script>
  </body>
</html>

Disable Options

We can disable all options with the disable 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-option-group
            v-model="group"
            disable
            :options="options"
            color="primary"
          >
          </q-option-group>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          group: "op1",
          options: [
            {
              label: "Option 1",
              value: "op1"
            },
            {
              label: "Option 2",
              value: "op2"
            },
            {
              label: "Option 3",
              value: "op3"
            }
          ]
        }
      });
    </script>
  </body>
</html>

We can disable options with the disable property set to true :

<!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-option-group v-model="group" :options="options" color="primary">
          </q-option-group>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          group: "op1",
          options: [
            {
              label: "Option 1",
              value: "op1"
            },
            {
              label: "Option 2",
              value: "op2"
            },
            {
              label: "Option 3",
              value: "op3",
              disable: true
            }
          ]
        }
      });
    </script>
  </body>
</html>

Conclusion

We can set option groups to be rendered our way with Quasar’s q-option-group component.

Quasar

Developing Vue Apps with the Quasar Library — Option Groups

Post author By John Au-Yeung
Post date December 5, 2020
No Comments on Developing Vue Apps with the Quasar Library — Option 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.

Option Groups

We can add option groups into our Vue app with Quasar’sq-option-group 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-option-group v-model="group" :options="options" color="primary">
          </q-option-group>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          group: "op1",
          options: [
            {
              label: "Option 1",
              value: "op1"
            },
            {
              label: "Option 2",
              value: "op2"
            },
            {
              label: "Option 3",
              value: "op3"
            }
          ]
        }
      });
    </script>
  </body>
</html>

We set the options prop to set the options.

A group of radio buttons will be rendered.

We can set the type prop to checkbox to show a group of checkboxes:

<!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-option-group
            v-model="group"
            type="checkbox"
            :options="options"
            color="primary"
          >
          </q-option-group>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          group: ["op1"],
          options: [
            {
              label: "Option 1",
              value: "op1"
            },
            {
              label: "Option 2",
              value: "op2"
            },
            {
              label: "Option 3",
              value: "op3"
            }
          ]
        }
      });
    </script>
  </body>
</html>

We set the group model value to an array since we can select multiple values.

Also, we can set the type to toggle to let us render a group of toggle switches:

<!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-option-group
            v-model="group"
            type="toggle"
            :options="options"
            color="primary"
          >
          </q-option-group>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          group: ["op1"],
          options: [
            {
              label: "Option 1",
              value: "op1"
            },
            {
              label: "Option 2",
              value: "op2"
            },
            {
              label: "Option 3",
              value: "op3"
            }
          ]
        }
      });
    </script>
  </body>
</html>

We can put the labels on the left side with the left-label 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-option-group
            v-model="group"
            left-label
            :options="options"
            color="primary"
          >
          </q-option-group>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          group: "op1",
          options: [
            {
              label: "Option 1",
              value: "op1"
            },
            {
              label: "Option 2",
              value: "op2"
            },
            {
              label: "Option 3",
              value: "op3"
            }
          ]
        }
      });
    </script>
  </body>
</html>

Conclusion

We can use Quasar’s q-option-group component to render a group of checkboxes, radio buttons, or toggles.

Quasar

Developing Vue Apps with the Quasar Library — Button Group Options

Post author By John Au-Yeung
Post date December 5, 2020
No Comments on Developing Vue Apps with the Quasar Library — Button Group Options

white puppy in basket in macro photography

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 in a Dark Background

We can add a button group in a dark background with the dark 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 bg-grey-10 text-white">
          <q-btn-toggle
            v-model="model"
            push
            glossy
            toggle-color="primary"
            :options="options"
          >
          </q-btn-toggle>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: "",
          options: [
            { label: "Battery low", value: "bat" },
            { label: "Friend request", value: "friend", color: "green" },
            { label: "Picture uploaded", value: "upload", color: "red" }
          ]
        }
      });
    </script>
  </body>
</html>

Button Toggle Content

We can set the options content by populating the slot with the name given by the slot property.

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 bg-grey-10 text-white">
          <q-btn-toggle
            v-model="model"
            push
            rounded
            glossy
            toggle-color="purple"
            :options="options"
          >
            <template v-slot:one>
              <div class="row items-center no-wrap">
                <div class="text-center">Pick<br />boat</div>
                <q-icon right name="directions_boat" />
              </div>
            </template>

            <template v-slot:two>
              <div class="row items-center no-wrap">
                <div class="text-center">Pick<br />car</div>
                <q-icon right name="directions_car" />
              </div>
            </template>

            <template v-slot:three>
              <div class="row items-center no-wrap">
                <div class="text-center">Pick<br />railway</div>
                <q-icon right name="directions_railway" />
              </div>
            </template>
          </q-btn-toggle>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: "",
          options: [
            { value: "one", slot: "one" },
            { value: "two", slot: "two" },
            { value: "three", slot: "three" }
          ]
        }
      });
    </script>
  </body>
</html>

We populate the one , two , and three slot to populate the content of the buttons in the button toggle.

Also, we can disable the button toggle with the disabled 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-btn-toggle
            disable
            v-model="model"
            toggle-color="primary"
            push
            glossy
            :options="[
              {label: 'One', value: 'one'},
              {label: 'Two', value: 'two'},
              {label: 'Three', value: 'three'}
            ]"
          >
          </q-btn-toggle>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: ""
        }
      });
    </script>
  </body>
</html>

We can set the readonly prop to disable the button group without changing it styles.

Conclusion

We can set various options with Quasar’s button group.

Quasar

Developing Vue Apps with the Quasar Library — Button Toggles

Post author By John Au-Yeung
Post date December 5, 2020
No Comments on Developing Vue Apps with the Quasar Library — Button Toggles

Labrador retriever puppy walking on green grass

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.

Toggles in Option Groups

We can add a group of toggles with the q-option-group 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-option-group
            :options="options"
            label="Notifications"
            type="toggle"
            v-model="group"
          >
          </q-option-group>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          group: [],
          options: [
            { label: "Battery low", value: "bat" },
            { label: "Friend request", value: "friend", color: "green" },
            { label: "Picture uploaded", value: "upload", color: "red" }
          ]
        }
      });
    </script>
  </body>
</html>

Button Toggle

Quasar comes with the q-btn-toggle component that renders a button toggle.

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"
      >
        <div class="q-pa-md">
          <q-btn-toggle
            v-model="model"
            push
            glossy
            toggle-color="primary"
            :options="options"
          >
          </q-btn-toggle>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: "",
          options: [
            { label: "Battery low", value: "bat" },
            { label: "Friend request", value: "friend", color: "green" },
            { label: "Picture uploaded", value: "upload", color: "red" }
          ]
        }
      });
    </script>
  </body>
</html>

We add the push prop to let users push the buttons.

glossy adds a glossy effect.

And the toggle-color prop sets the color of the toggled element.

options sets the options for the button toggle.

We can replace glossy with flat , rounded and unelevated to change the styles.

no-caps changes the button text to be sentence case.

We can spread the button toggle across the screen with 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"
      >
        <div class="q-pa-md">
          <q-btn-toggle
            v-model="model"
            spread
            no-caps
            toggle-color="purple"
            color="white"
            text-color="black"
            toggle-color="primary"
            :options="options"
          >
          </q-btn-toggle>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: "",
          options: [
            { label: "Battery low", value: "bat" },
            { label: "Friend request", value: "friend", color: "green" },
            { label: "Picture uploaded", value: "upload", color: "red" }
          ]
        }
      });
    </script>
  </body>
</html>

Conclusion

We can add a button toggle into our Vue app with Quasar’sq-btn-toggle component.