Tab, Card component

[AbhimanyuAryan]

added

q-tab i.e. tab q-tabs i.e. tabgroup q-tab-panel i.e. tabpanel q-tab-panels i.e. tabpanelgroup

[protozoo]

Tested it by building the example below using the no-code builder:

<div class="row">
    <div class="st-col col-12 col-sm">
        <q-tabs v-model="tab" class="text-teal">
            <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>
    </div>
</div>
<div class="row">
    <div class="st-col col-12 col-sm">
        <q-tab-panels v-model="tab">
            <q-tab-panel :name="'mails'">
                <q-card>
                    <q-card-section>
                        <div class="text-h4 q-mb-md">Mails</div>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                    </q-card-section>
                    <q-card-section>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                    </q-card-section>
                </q-card>
            </q-tab-panel>
            <q-tab-panel :name="'alarms'"></q-tab-panel>
            <q-tab-panel :name="'movies'"></q-tab-panel>
        </q-tab-panels>
    </div>
</div>
<header class="st-header q-pa-sm">
    <h1 class="st-header__title text-h3">Header Text</h1>
</header>
<div>
    <div>
        <q-tabs v-model="tab" class="text-teal">
            <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>
    <div>
        <q-tab-panels v-model="tab" :animated="true" :swipeable="true" :vertical="true" :transition-prev="'jump-up'" :transition-next="'jump-up'">
            <q-tab-panel :name="'mails'">
                <div class="text-h4 q-mb-md">Mails</div>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
            </q-tab-panel>
            <q-tab-panel :name="'alarms'">
                <div class="text-h4 q-mb-md">Alarms</div>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
            </q-tab-panel>
            <q-tab-panel :name="'movies'">
                <div class="text-h4 q-mb-md">Movies</div>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
            </q-tab-panel>
        </q-tab-panels>
    </div>
</div>