No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    5
    12
    1491
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • s.molinari
      s.molinari last edited by

      Is this what you are trying to achieve?

      https://quasar.dev/layout/drawer#Example--Mini-mode-with-click-trigger

      Scott

      mboeni 1 Reply Last reply Reply Quote 0
      • mboeni
        mboeni @s.molinari last edited by

        @s-molinari

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

        M.

        1 Reply Last reply Reply Quote 0
        • s.molinari
          s.molinari last edited by

          There is this possibility,

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

          Scott

          mboeni 1 Reply Last reply Reply Quote 0
          • mboeni
            mboeni @s.molinari last edited by

            @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.

            metalsadman 1 Reply Last reply Reply Quote 0
            • s.molinari
              s.molinari last edited by

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

              Scott

              1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman @mboeni last edited by

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

                mboeni 1 Reply Last reply Reply Quote 0
                • mboeni
                  mboeni @metalsadman last edited by 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.

                  1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman last edited by metalsadman

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

                    mboeni 1 Reply Last reply Reply Quote 0
                    • mboeni
                      mboeni @metalsadman last edited by 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 🙂

                      1 Reply Last reply Reply Quote 1
                      • vasilysanych
                        vasilysanych last edited by 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>
                        1 Reply Last reply Reply Quote 0
                        • Y
                          yssunjoko last edited by 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>
                          
                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post