Tabs don't align-left in vertical Q-Tabs (Solved)

[mboeni]

@s-molinari

Yep, exactly. Is that doable with q-tabs?

M.

[s.molinari]

There is this possibility,

https://quasar.dev/vue-components/tabs#Example--Vertical-(example-with-QSplitter)

Scott

[mboeni]

@s-molinari

I actually based my code on that example. The difference is that i want the icons to be inline and left-aligned. The example is centered.

M.

[s.molinari]

Someone with a bit more design experience will need to step in. I’m at a loss.

Scott

[metalsadman]

@mboeni try this https://codepen.io/metalsadman/pen/KKKNPoB.

[mboeni]

@metalsadman

That’s actually exactly what I want. I tried to adapt it to my case but I struggle a bit with how to apply the css. The example seems to apply it globally (i.e. it affects the whole UI).

Here’s what I came up with so far:

<template>
  <q-page class="flex flex-start">
  <div>
    <q-splitter v-model="splitterModel"
      style="height: 100%"
    >
      <template v-slot:before >
        <q-tabs
          v-model="selectedTab"
          vertical
          dense
          inline-label
          class="text-blue-grey-9"
         >

          <q-tab name="myAccount" icon="account_box" label="My Account" />
          <q-tab name="appearance" icon="palette" label="Appearance" />
          <q-tab name="ive" icon="visibility" label="IVE" />
        </q-tabs>
      </template>

      <template v-slot:after>
        <q-tab-panels
          v-model="selectedTab"
          animated
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <q-tab-panel name="myAccount">
            <div class="text-h5 q-mb-md">MY ACCOUNT</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="appearance">
            <div class="text-h5 q-mb-md">APPEARANCE</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="ive">
            <div class="text-h5 q-mb-md">Intelligent Virtual Entities</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>
      </template>
    </q-splitter>
  </div>
  </q-page>
</template>

<script>
export default {
  name: 'Settings',
  data () {
    return {
      selectedTab: 'myAccount',
      splitterModel: 20 // start at 20%
    }
  }

}
</script>

<style lang="scss">
  .tabs-align-left {justify-content: initial;}
</style>

I’m not sure, though how and where to apply it…

Cheers,
m.

[metalsadman]

@mboeni put it in your component’s style tags with scope. ie. <style scoped>...</style>.

[mboeni]

@metalsadman

Got it. It worked like this:

<q-tab name="myAccount" icon="account_box" label="My Account" style="justify-content:initial" />
<q-tab name="appearance" icon="palette" label="Appearance" style="justify-content:initial"/>
<q-tab name="ive" icon="visibility" label="IVE" style="justify-content:initial" />

Thanks for your help

[vasilysanych]

I found something like this

<q-tab v-for="tab in tabs" :key="tab.code" :name="tab.code" content-class="full-width">
	<q-item dense class="full-width">
		<q-item-section avatar class="float-left">
			<q-avatar :icon="tab.code" />
		</q-item-section>
		<q-item-section>{{tab.title}}</q-item-section>
	</q-item>
</q-tab>

[yssunjoko]

Thanks @mboeni I later added text-align: left so it works for lengthy label

<q-tabs v-model="shownTab" vertical no-caps>
          <q-tab
            v-for="(dataRow, index) in data"
            :key="index"
            :name="'tab-'+index"
            style="justify-content:initial; text-align: left"
          >{{dataRow.label}}</q-tab>
</q-tabs>