Category: Vue

Quasar

Developing Vue Apps with the Quasar Library — Slider Options

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

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 Label Value for a Slider

We can change the label value for the slider with the label-value 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
            :label-value="`${model}px`"
            label-always
            v-model="model"
            :min="0"
            :max="200"
          >
          </q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: 0
        }
      });
    </script>
  </body>
</html>

We can add the markers prop to add markers into the slider:

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

We can also add the snap prop with the markers prop to snap to a marker:

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

We can set the model value to change only when we lift the mouse button by attaching a change listener:

<!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
            :value="model"
            @change="val => { model = val }"
            :min="0"
            :max="45"
            :step="5"
            color="purple"
            label
          >
          </q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: 0
        }
      });
    </script>
  </body>
</html>

We get the val parameter which has the selected value and then set its value to the model reactive property.

And we set the value prop to model to display the value on the slider.

The change event is only emitted when we lift the mouse button, so the model value won’t change as often.

Conclusion

We can set various options of a slider with the Quasar q-slider component.

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.