Categories
Quasar

Developing Vue Apps with the Quasar Library — Input Slots and Inputs in Toolbars

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.

Customizing Inputs

We can add more customizations for our Quasar text input fields.

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-input
            standout
            bottom-slots
            v-model="text"
            label="Label"
            counter
            maxlength="12"
          >
            <template v-slot:before>
              <q-avatar>
                <img src="https://cdn.quasar.dev/img/avatar5.jpg" />
              </q-avatar>
            </template>

            <template v-slot:append>
              <q-icon
                v-if="text !== ''"
                name="close"
                @click="text = ''"
                class="cursor-pointer"
              ></q-icon>
              <q-icon name="schedule"></q-icon>
            </template>

            <template v-slot:hint>
              Field hint
            </template>

            <template v-slot:after>
              <q-btn round dense flat icon="send"></q-btn>
            </template>
          </q-input>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          text: ""
        }
      });
    </script>
  </body>
</html>

The before slot is used to add an avatar left of the input.

It’ll be placed outside the input.

The append slot adds an ‘x’ icon into the right side of the input.

When we click it, it clears the text.

Also, we have another icon in the same slot.

The hint slot adds text below the input.

And the after slot has another button that’s shown outside the input box on the right side.

Text Input Field in Toolbars

We can add a text input field into a toolbar.

To do this, 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-toolbar class="bg-primary text-white rounded-borders">
            <q-btn round dense flat icon="menu" class="q-mr-xs"></q-btn>
            <q-avatar class="gt-xs">
              <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
            </q-avatar>

            <q-space></q-space>

            <q-input
              dark
              dense
              standout
              v-model="text"
              input-class="text-right"
              class="q-ml-md"
            >
              <template v-slot:append>
                <q-icon v-if="text === ''" name="search"></q-icon>
                <q-icon
                  v-else
                  name="clear"
                  class="cursor-pointer"
                  @click="text = ''"
                >
                </q-icon>
              </template>
            </q-input>
          </q-toolbar>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          text: ""
        }
      });
    </script>
  </body>
</html>

We add the q-toolbar with a q-btn for the menu.

The q-space component is a spacer component.

The q-input is pushed to the right with the q-space component.

The append slot has the icons for clearing the input if something is entered and an search icon is displayed otherwise.

Conclusion

We can add input boxes into toolbars in a Vue app with the Quasar library.

Categories
Quasar

Developing Vue Apps with the Quasar Library — Input Customization

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.

Rounded and Square Inputs

We can add rounded and square inputs with the rounded and square props with the outlined prop.

And we can add the borderless prop to remove the text input’s border:

<!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-input rounded outlined v-model="text" label="Rounded"></q-input>  
          <br />  
          <q-input square outlined v-model="text" label="Square"></q-input>  
          <br />  
          <q-input borderless v-model="text" label="Outlined"></q-input>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          text: ""  
        }  
      });  
    </script>  
  </body>  
</html>

Color and Icon

We can change the color and icon of text inputs.

To do this, 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-input  
            color="lime-11"  
            bg-color="green"  
            filled  
            v-model="text"  
            label="Label"  
          >  
            <template v-slot:prepend>  
              <q-icon name="event" />  
            </template>  
          </q-input>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          text: ""  
        }  
      });  
    </script>  
  </body>  
</html>

We add the color prop to change the color of the label, placeholder, and outline when we focus on the input.

bg-color changes the background color.

filled adds the background color.

Then to add an icon into the input, we put it in the prepend slot.

This adds the icon to the left side of the input.

To add an icon to the right, we add it to the append slot:

<!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-input  
            color="lime-11"  
            bg-color="green"  
            filled  
            v-model="text"  
            label="Label"  
          >  
            <template v-slot:append>  
              <q-icon name="event"></q-icon>  
            </template>  
          </q-input>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          text: ""  
        }  
      });  
    </script>  
  </body>  
</html>

To add a hint for the user below the input box, we populate the hint slot:

<!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-input v-model="text" label="Label" bottom-slots counter clearable>  
            <template v-slot:prepend>  
              <q-icon name="event"></q-icon>  
            </template>  
            <template v-slot:hint>  
              Field hint  
            </template>  
          </q-input>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          text: ""  
        }  
      });  
    </script>  
  </body>  
</html>

We need the bottom-slots prop set to true to display the content of the hint slot.

Also, we added the counter prop to show the number of characters we entered.

clearable adds a button to the right of the input to let us click on it to clear the input value.

Conclusion

We can add text fields with various options into our Vue app with the Quasar library.

Categories
Quasar

Developing Vue Apps with the Quasar Library — Floating Action Buttons and Text Inputs

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 Floating Action Button Label Styles

We can change the styles of the floating action button label with the label-class 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-page-container>
          <q-page padding>
            <q-page-sticky position="bottom-right" :offset="[18, 18]">
              <q-fab
                v-model="fab1"
                label="Actions"
                label-position="top"
                label-class="bg-grey-3 text-purple"
                external-label
                color="purple"
                icon="keyboard_arrow_left"
                direction="left"
              >
                <q-fab-action
                  external-label
                  label-position="top"
                  color="primary"
                  @click="onClick"
                  icon="mail"
                  label="Email"
                  label-class="bg-grey-3 text-purple"
                >
                </q-fab-action>
                <q-fab-action
                  external-label
                  label-position="top"
                  color="secondary"
                  @click="onClick"
                  icon="alarm"
                  label="Alarm"
                  label-class="bg-grey-3 text-purple"
                >
                </q-fab-action>
              </q-fab>
            </q-page-sticky>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          fab1: false
        },
        methods: {
          onClick() {
            console.log("clicked");
          }
        }
      });
    </script>
  </body>
</html>

Also, we can make the floating action buttons square with the square 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-page-container>
          <q-page padding>
            <q-page-sticky position="bottom-right" :offset="[18, 18]">
              <q-fab
                v-model="fab1"
                label="Actions"
                label-position="top"
                label-class="bg-grey-3 text-purple"
                external-label
                color="purple"
                icon="keyboard_arrow_left"
                direction="left"
                square
              >
                <q-fab-action
                  external-label
                  label-position="top"
                  color="primary"
                  @click="onClick"
                  icon="mail"
                  label="Email"
                  square
                >
                </q-fab-action>
                <q-fab-action
                  external-label
                  label-position="top"
                  color="secondary"
                  @click="onClick"
                  icon="alarm"
                  label="Alarm"
                  square
                >
                </q-fab-action>
              </q-fab>
            </q-page-sticky>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          fab1: false
        },
        methods: {
          onClick() {
            console.log("clicked");
          }
        }
      });
    </script>
  </body>
</html>

Input Text Field

Quasar comes with an input text field component.

To add it, we use the q-input 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-input v-model="text" label="Standard"></q-input>
          <br />
          <q-input filled v-model="text" label="Filled"></q-input>
          <br />
          <q-input outlined v-model="text" label="Outlined"></q-input>
          <br />
          <q-input standout v-model="text" label="Standout"></q-input>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          text: ""
        }
      });
    </script>
  </body>
</html>

We add the q-input component with the filled prop to add a gray background.

outlined adds an outline to the input.

standout makes the background turn black when we focus on the input.

Conclusion

We can add square floating action buttons and input text fields into our Vue app with the Quasar library.

Categories
Quasar

Developing Vue Apps with the Quasar Library — Floating Buttons Customization

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.

Expandable Floating Buttons

We can add expandable floating buttons that show more items when we click it by adding q-fab-action components inside the q-fab 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-page-container>
          <q-page padding>
            <q-page-sticky position="bottom-right" :offset="[18, 18]">
              <q-fab color="purple" icon="keyboard_arrow_up" direction="up">
                <q-fab-action
                  color="primary"
                  @click="onClick"
                  icon="mail"
                ></q-fab-action>
                <q-fab-action
                  color="secondary"
                  @click="onClick"
                  icon="alarm"
                ></q-fab-action>
              </q-fab>
            </q-page-sticky>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          expanded: false
        },
        methods: {
          onClick() {
            console.log("clicked");
          }
        }
      });
    </script>
  </body>
</html>

We can also add labels inside the floating action button and position it with the label and label-position props respectively:

<!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-page-container>
          <q-page padding>
            <q-page-sticky position="bottom-right" :offset="[18, 18]">
              <q-fab
                label="Actions"
                label-position="left"
                color="purple"
                icon="keyboard_arrow_up"
                direction="up"
              >
                <q-fab-action
                  color="primary"
                  @click="onClick"
                  icon="mail"
                ></q-fab-action>
                <q-fab-action
                  color="secondary"
                  @click="onClick"
                  icon="alarm"
                ></q-fab-action>
              </q-fab>
            </q-page-sticky>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          expanded: false
        },
        methods: {
          onClick() {
            console.log("clicked");
          }
        }
      });
    </script>
  </body>
</html>

The internal label can be hidden with the hide-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"
      >
        <q-page-container>
          <q-page padding>
            <q-toggle v-model="hideLabels" label="Hide labels"></q-toggle>
            <q-page-sticky position="bottom-right" :offset="[18, 18]">
              <q-fab
                label="Actions"
                label-position="left"
                color="purple"
                icon="keyboard_arrow_up"
                direction="up"
                :hide-label="hideLabels"
              >
              </q-fab>
            </q-page-sticky>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          hideLabels: false
        }
      });
    </script>
  </body>
</html>

We can have the labels outside the button by adding the external-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"
      >
        <q-page-container>
          <q-page padding>
            <q-page-sticky position="bottom-right" :offset="[18, 18]">
              <q-fab
                v-model="fab1"
                label="Actions"
                label-position="top"
                external-label
                color="purple"
                icon="keyboard_arrow_left"
                direction="left"
              >
                <q-fab-action
                  external-label
                  label-position="top"
                  color="primary"
                  [@click](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fclick "Twitter profile for @click")="onClick"
                  icon="mail"
                  label="Email"
                >
                </q-fab-action>
                <q-fab-action
                  external-label
                  label-position="top"
                  color="secondary"
                  [@click](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fclick "Twitter profile for @click")="onClick"
                  icon="alarm"
                  label="Alarm"
                >
                </q-fab-action>
              </q-fab>
            </q-page-sticky>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          fab1: false
        },
        methods: {
          onClick() {
            console.log("clicked");
          }
        }
      });
    </script>
  </body>
</html>

Conclusion

We can add floating buttons with various customizations into our Vue app with the Quasar library.

Categories
Quasar

Developing Vue Apps with the Quasar Library — Expansion Items and Floating Action Buttons

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.

Customize Expansion Item

We can make an expansion item denser by using the dense and dense-toggle props:

<!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-expansion-item
          v-model="expanded"
          icon="perm_identity"
          label="Settings"
          dense
          dense-toggle
          expand-separator
        >
          <q-card>
            <q-card-section>
              Lorem ipsum dolor sit amet
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          expanded: false
        }
      });
    </script>
  </body>
</html>

We can switch the side the toggle on with the switch-toggle-side 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-expansion-item
          v-model="expanded"
          icon="perm_identity"
          label="Settings"
          switch-toggle-side
          expand-separator
        >
          <q-card>
            <q-card-section>
              Lorem ipsum dolor sit amet
            </q-card-section>
          </q-card>
        </q-expansion-item>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          expanded: false
        }
      });
    </script>
  </body>
</html>

We can customize the header by populating the header slot:

<!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-expansion-item
          v-model="expanded"
          icon="perm_identity"
          label="Settings"
        >
          <template v-slot:header>
            <q-item-section avatar>
              <q-avatar>
                <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
              </q-avatar>
            </q-item-section>

            <q-item-section>
              John Doe
            </q-item-section>
          </template>

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

Floating Action Button

Quasar comes with a floating action button component.

For example, we can use it 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-page-container>
          <q-page padding>
            <p v-for="n in 15" :key="n">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>

            <q-page-sticky position="bottom-right" :offset="[18, 18]">
              <q-btn fab icon="add" color="accent"></q-btn>
            </q-page-sticky>
          </q-page>
        </q-page-container>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          expanded: false
        }
      });
    </script>
  </body>
</html>

We add a q-btn with the fab prop to turn it into a floating action button.

And we put it in the q-page-sticky component so that it sticks to the bottom of the page as indicated by the position prop.

Conclusion

We can add expansion items and floating action buttons into our Vue app with the Quasar library.