Category: Quasar

Quasar

Developing Vue Apps with the Quasar Library — Tab Panel Options

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

Tab Panels

We can add tab panels with the q-tab-panel 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;">
        <div class="q-pa-md">
          <q-option-group
            v-model="panel"
            inline
            :options="[
              { label: 'Mails', value: 'mails' },
              { label: 'Alarms', value: 'alarms' },
              { label: 'Movies', value: 'movies' }
            ]"
          >
          </q-option-group>

          <q-tab-panels
            v-model="panel"
            animated
            class="shadow-2 rounded-borders"
          >
            <q-tab-panel name="mails">
              <div class="text-h6">Mails</div>
              Lorem ipsum
            </q-tab-panel>

            <q-tab-panel name="alarms">
              <div class="text-h6">Alarms</div>
              Lorem ipsum
            </q-tab-panel>

            <q-tab-panel name="movies">
              <div class="text-h6">Movies</div>
              Lorem ipsum
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          panel: "mails"
        }
      });
    </script>
  </body>
</html>

We can add q-tab-panels components with q-tab-panel inside.

The v-model binds to the name value of the q-tab-panel , which is set with the q-option-group .

We can change the color with the class prop of the q-tab-panels 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;">
        <div class="q-pa-md">
          <q-option-group
            v-model="panel"
            inline
            :options="[
              { label: 'Mails', value: 'mails' },
              { label: 'Alarms', value: 'alarms' },
              { label: 'Movies', value: 'movies' }
            ]"
          >
          </q-option-group>

          <q-tab-panels v-model="panel" animated class="bg-primary text-white">
            <q-tab-panel name="mails">
              <div class="text-h6">Mails</div>
              Lorem ipsum
            </q-tab-panel>

            <q-tab-panel name="alarms">
              <div class="text-h6">Alarms</div>
              Lorem ipsum
            </q-tab-panel>

            <q-tab-panel name="movies">
              <div class="text-h6">Movies</div>
              Lorem ipsum
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          panel: "mails"
        }
      });
    </script>
  </body>
</html>

Tab Panel Transitions

We can change the tab panel’s transitions with the animated and transition-prev and transition-next 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;">
        <div class="q-pa-md">
          <q-option-group
            v-model="panel"
            inline
            :options="[
              { label: 'Mails', value: 'mails' },
              { label: 'Alarms', value: 'alarms' },
              { label: 'Movies', value: 'movies' }
            ]"
          >
          </q-option-group>

          <q-tab-panels
            v-model="panel"
            animated
            transition-prev="scale"
            transition-next="scale"
          >
            <q-tab-panel name="mails">
              <div class="text-h6">Mails</div>
              Lorem ipsum
            </q-tab-panel>

            <q-tab-panel name="alarms">
              <div class="text-h6">Alarms</div>
              Lorem ipsum
            </q-tab-panel>

            <q-tab-panel name="movies">
              <div class="text-h6">Movies</div>
              Lorem ipsum
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          panel: "mails"
        }
      });
    </script>
  </body>
</html>

transition-prev is applied when we leave a tab panel.

And transition-next is applied when we enter a tab panel.

Conclusion

We can add tab panels into our Vue app with the Quasar library.

Quasar

Developing Vue Apps with the Quasar Library — Tabs with Dropdown and Tab Panels

Post author By John Au-Yeung
Post date December 20, 2020
No Comments on Developing Vue Apps with the Quasar Library — Tabs with Dropdown and Tab Panels

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.

Tabs with Dropdown

We can add tabs with a dropdown item.

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;">
        <div class="q-pa-md">
          <q-tabs v-model="tab" inline-label class="bg-yellow shadow-2">
            <q-tab name="mails" label="Mails" icon="mail"></q-tab>
            <q-tab name="alarms" label="Alarms" icon="alarm"></q-tab>
            <q-btn-dropdown auto-close stretch flat icon="more" label="More...">
              <q-list>
                <q-item clickable @click="tab = 'movies'">
                  <q-item-section>Movies</q-item-section>
                </q-item>

                <q-item clickable @click="tab = 'photos'">
                  <q-item-section>Photos</q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </q-tabs>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          tab: undefined
        }
      });
    </script>
  </body>
</html>

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

And the q-list is displayed as the dropdown list.

Tab Toolbar

We can use q-tabs in a q-toolbar .

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;">
        <div class="q-pa-md">
          <q-toolbar class="bg-purple text-white shadow-2 rounded-borders">
            <q-btn flat label="Homepage"></q-btn>
            <q-space> </q-space>
            <q-tabs v-model="tab" shrink stretch>
              <q-tab name="tab1" label="Tab 1"></q-tab>
              <q-tab name="tab2" label="Tab 2"></q-tab>
              <q-tab name="tab3" label="Tab 3"></q-tab>
            </q-tabs>
          </q-toolbar>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          tab: undefined
        }
      });
    </script>
  </body>
</html>

We add the shrink and strech props to fill the available space while avoiding filling the whole toolbar.

Dynamic Tabs

We can display tabs dynamically with v-for :

<!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;">
        <div class="q-pa-md">
          <q-tabs v-model="tab" inline-label shrink stretch>
            <q-tab v-for="tab in tabs" :key="tab.name" v-bind="tab" />
          </q-tabs>
        </div>
      </q-layout>
    </div>
    <script>
      const tabs = [
        { name: "mails", icon: "mail", label: "Mails" },
        { name: "alarms", icon: "alarm", label: "Alarms" },
        { name: "movies", icon: "movie", label: "Movies" }
      ];

      new Vue({
        el: "#q-app",
        data: {
          tab: undefined,
          tabs
        }
      });
    </script>
  </body>
</html>

Tab Panel

We can display tab panels when we click on a tab.

To add them, 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;">
        <div class="q-pa-md">
          <q-card>
            <q-tabs
              v-model="tab"
              dense
              class="text-grey"
              active-color="primary"
              indicator-color="primary"
              align="justify"
              narrow-indicator
            >
              <q-tab name="mails" label="Mails"></q-tab>
              <q-tab name="alarms" label="Alarms"></q-tab>
              <q-tab name="movies" label="Movies"></q-tab>
            </q-tabs>

            <q-separator></q-separator>

            <q-tab-panels v-model="tab" animated>
              <q-tab-panel name="mails">
                <div class="text-h6">Mails</div>
                Lorem ipsum
              </q-tab-panel>

              <q-tab-panel name="alarms">
                <div class="text-h6">Alarms</div>
                Lorem ipsum
              </q-tab-panel>

              <q-tab-panel name="movies">
                <div class="text-h6">Movies</div>
                Lorem ipsum
              </q-tab-panel>
            </q-tab-panels>
          </q-card>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          tab: "mails"
        }
      });
    </script>
  </body>
</html>

We set the name prop of the q-tab and q-tab-panel to match so that we click on it, then the tab panel we want will be displayed.

Conclusion

We can add tabs with dropdowns and add tab panels with Quasar’s tab components.

Quasar

Developing Vue Apps with the Quasar Library — Tab Options

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

Tab Ripple Effect

We can a ripple effect on the tabs.

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;">  
        <div class="q-pa-md">  
          <q-tabs v-model="tab">  
            <q-tab  
              :ripple="{ color: 'orange' }"  
              name="mails"  
              icon="mail"  
              label="Mails"  
            ></q-tab>  
            <q-tab  
              :ripple="{ color: 'orange' }"  
              name="alarms"  
              icon="alarm"  
              label="Alarms"  
            ></q-tab>  
            <q-tab  
              :ripple="{ color: 'orange' }"  
              name="movies"  
              icon="movie"  
              label="Movies"  
            ></q-tab>  
          </q-tabs>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          tab: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

We set the ripple prop to an object with the color property.

Indicator Color

We can change the color when the tab is active with the active-color prop.

And we can change the color of the bottom indicator when the indicator-color 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;">  
        <div class="q-pa-md">  
          <q-tabs  
            class="bg-primary text-white shadow-2"  
            v-model="tab"  
            indicator-color="transparent"  
            active-color="white"  
          >  
            <q-tab name="mails" icon="mail" label="Mails"></q-tab>  
            <q-tab name="alarms" icon="alarm" label="Alarms"></q-tab>  
            <q-tab name="movies" icon="movie" label="Movies"></q-tab>  
          </q-tabs>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          tab: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

Tab Notifications

We can add badges to tabs to show notifications.

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;">  
        <div class="q-pa-md">  
          <q-tabs v-model="tab" class="bg-primary text-white shadow-2">  
            <q-tab name="mails" icon="mail" label="Mails">  
              <q-badge color="red" floating>2</q-badge>  
            </q-tab>  
            <q-tab name="alarms" icon="alarm" label="Alarms">  
              <q-badge color="red" floating>10+</q-badge>  
            </q-tab>  
            <q-tab alert name="movies" icon="movie" label="Movies" />  
          </q-tabs>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          tab: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

We add the q-badge into the default slots of the q-tab components.

Tab Alignment

We can set the alignment of the tabs with the align 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;">  
        <div class="q-pa-md">  
          <q-tabs  
            v-model="tab"  
            dense  
            align="left"  
            class="bg-primary text-white shadow-2"  
            :breakpoint="0"  
          >  
            <q-tab name="mails" icon="mail"></q-tab>  
            <q-tab name="alarms" icon="alarm"></q-tab>  
          </q-tabs>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          tab: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

Now all the tabs are displayed on the left side of the screen.

We can also set it to center , right and justify .

Conclusion

We can add ripple effects, set tab notifications, and set tab alignment with Quasar’s tab component.

Quasar

Developing Vue Apps with the Quasar Library — Tabs

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

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.

Tabs

We can add tabs into our Vue app with Quasar’s q-tab 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-tabs  
            v-model="tab"  
            inline-label  
            class="bg-purple text-white shadow-2"  
          >  
            <q-tab name="mails" icon="mail" label="Mails"></q-tab>  
            <q-tab name="alarms" icon="alarm" label="Alarms"></q-tab>  
            <q-tab name="movies" icon="movie" label="Movies"></q-tab>  
          </q-tabs>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          tab: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

We add the q-tabs component as a wrapper.

And we add the q-tab component to add the tabs.

icon has the icon name. And label has the label text.

The name value is set as the value of the tab reactive property when we click on a tab.

The inline-label prop lets us make the label text display to the right of the icon.

Tab Arrows

Arrows will display when the tabs overflow the container.

We can set it to display outside the tab content with the outside-arrow 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-tabs  
            v-model="tab"  
            inline-label  
            outside-arrows  
            mobile-arrows  
            class="bg-purple text-white shadow-2"  
          >  
            <q-tab name="mails" icon="mail" label="Mails"></q-tab>  
            <q-tab name="alarms" icon="alarm" label="Alarms"></q-tab>  
            <q-tab name="movies" icon="movie" label="Movies"></q-tab>  
          </q-tabs>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          tab: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

Vertical Tabs

We can add the verttical prop to set the tabs to display vertically:

<!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-tabs v-model="tab" vertical class="bg-purple text-white shadow-2">  
            <q-tab name="mails" icon="mail" label="Mails"></q-tab>  
            <q-tab name="alarms" icon="alarm" label="Alarms"></q-tab>  
            <q-tab name="movies" icon="movie" label="Movies"></q-tab>  
          </q-tabs>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          tab: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

Tab Color

We can set the color of the tab content individually with their own classes:

<!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;">  
        <div class="q-pa-md">  
          <q-tabs v-model="tab">  
            <q-tab  
              class="text-purple"  
              name="mails"  
              icon="mail"  
              label="Mails"  
            ></q-tab>  
            <q-tab  
              class="text-orange"  
              name="alarms"  
              icon="alarm"  
              label="Alarms"  
            ></q-tab>  
            <q-tab  
              class="text-teal"  
              name="movies"  
              icon="movie"  
              label="Movies"  
            ></q-tab>  
          </q-tabs>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          tab: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

We add our own class to each q-tab .

Conclusion

We can add tabs into our Vue app with Quasar’s q-tabs and q-tab components.

Quasar

Developing Vue Apps with the Quasar Library — Grid Display and Export Table Content

Post author By John Au-Yeung
Post date December 20, 2020
No Comments on Developing Vue Apps with the Quasar Library — Grid Display and Export Table Content

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.

Conditionally Display Table as Grid

The Quasar q-table‘s grid prop takes a boolean that lets us show the table as a grid conditionally.

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-table
            title="Treats"
            :data="data"
            :columns="columns"
            row-key="name"
            :grid="$q.screen.xs"
          >
          </q-table>
        </div>
      </q-layout>
    </div>
    <script>
      const columns = [
        {
          name: "name",
          required: true,
          label: "Dessert",
          align: "left",
          field: (row) => row.name,
          format: (val) => `${val}`,
          sortable: true
        },
        {
          name: "calories",
          align: "center",
          label: "Calories",
          field: "calories",
          sortable: true
        },
        { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
        {
          name: "calcium",
          label: "Calcium (%)",
          field: "calcium",
          sortable: true,
          sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
        }
      ];
      const data = [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          calcium: "14%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          calcium: "8%"
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          calcium: "6%"
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          calcium: "0%"
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          calcium: "2%"
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          calcium: "12%"
        }
      ];
      new Vue({
        el: "#q-app",
        data: {
          columns,
          data
        }
      });
    </script>
  </body>
</html>

We set it to $q.screen.xs .

So when the screen hits the xs breakpoint, the content is displayed as a grid.

Export Table Data

Quasar comes with the Quasar.export method to let us export data from a table.

We can use it by writing the following:

<!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-table
            title="Treats"
            :data="data"
            :columns="columns"
            row-key="name"
            :grid="$q.screen.xs"
          >
            <template v-slot:top-right>
              <q-btn
                color="primary"
                label="Export to csv"
                no-caps
                @click="exportTable"
              >
              </q-btn>
            </template>
          </q-table>
        </div>
      </q-layout>
    </div>
    <script>
      const columns = [
        {
          name: "name",
          required: true,
          label: "Dessert",
          align: "left",
          field: (row) => row.name,
          format: (val) => `${val}`,
          sortable: true
        },
        {
          name: "calories",
          align: "center",
          label: "Calories",
          field: "calories",
          sortable: true
        },
        { name: "fat", label: "Fat (g)", field: "fat", sortable: true },
        {
          name: "calcium",
          label: "Calcium (%)",
          field: "calcium",
          sortable: true,
          sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
        }
      ];
      const data = [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          calcium: "14%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          calcium: "8%"
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          calcium: "6%"
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          calcium: "0%"
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          calcium: "2%"
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          calcium: "12%"
        }
      ];

      const wrapCsvValue = (val, formatFn) => {
        let formatted = formatFn !== void 0 ? formatFn(val) : val;
        formatted =
          formatted === void 0 || formatted === null ? "" : String(formatted);
        formatted = formatted.split('"').join('""');
        return `"${formatted}"`;
      };

      new Vue({
        el: "#q-app",
        data: {
          columns,
          data
        },
        methods: {
          exportTable() {
            const content = [this.columns.map((col) => wrapCsvValue(col.label))]
              .concat(
                this.data.map((row) =>
                  this.columns
                    .map((col) =>
                      wrapCsvValue(
                        typeof col.field === "function"
                          ? col.field(row)
                          : row[col.field === undefined ? col.name : col.field],
                        col.format
                      )
                    )
                    .join(",")
                )
              )
              .join("rn");

            const status = Quasar.exportFile(
              "table-export.csv",
              content,
              "text/csv"
            );
          }
        }
      });
    </script>
  </body>
</html>

We convert each value to a CSV value with the wrapCsvValue function.

It wraps any value with spaces in quotes.

Then in the exportTable method, we call the wrapCsvValue to format the values.

Then we join each row object property together with commas.

And after that, we join the rows together.

Then we call Quasar.exportFile with the file name, content to save, and the MIME type of the file.

Conclusion

We can display our table conditionally as a grid.

Also, we can export the table content in the format we want with the exportFile method.