Quasar: Tab with dropdown

[rstoenescu]

[rottmann]

Something like: http://element.eleme.io/#/en-US/component/dropdown

or http://element.eleme.io/#/en-US/component/menu

would be nice.

[hawkeye64]

This works for me (notice the "label" for q-tab has html tags in it...), when clicked shows the associated popover as a dropdown menu attached to the q-tab.:

      <q-tab slot="title" icon="fa-cogs faa-pulse" class="faa-parent animated-hover" label="Settings <i class='fa fa-caret-down'></i>" @click="toggleSettingsPopover()">
        <q-popover ref="settingsPopover" v-model="displaySettings">
          <q-list item-separator link>
            <q-item @click="$router.replace('/settings_system'), $refs.settingsPopover.close()">
              <q-item-side left class="faa-parent animated-hover">
                <q-item-tile icon="fa-cog faa-pulse" />
              </q-item-side>
              System
            </q-item>
            <q-item @click="$router.replace('/settings_users'), $refs.settingsPopover.close()">
              <q-item-side left class="faa-parent animated-hover">
                <q-item-tile icon="fa-user faa-pulse" />
              </q-item-side>
              Users
            </q-item>
          </q-list>
        </q-popover>
      </q-tab>

[rstoenescu]

@hawkeye64 solution is good. Also, check the new QBtnDropdown in v0.15.

[hawkeye64]

@rstoenescu While my solution still works, I can no longer show the caret icon to indicate this is a dropdown as the label can no longer have html in it. Any suggestions? The QBtnDropdown is not a good solution for what's intended. (Quasar 0.17.x)