[Solved] [v1-beta] QTab Close Button



  • I want to place the close button in default slot QTab (QRouteTab to be more precise), but I can’t bring it to the top level. That is, the button doesn’t change the style when you hover and the event click doesn’t work.

          <q-tabs
            align="left"
            name="tab"
            v-model="selectedTab"
            inline-label
            no-caps
            dense
            shrink
          >
            <q-route-tab
              :key="tab.id"
              :icon="tab.icon"
              :name="tab.id"
              :to="{ name: tab.route }"
              v-for="tab in tabs"
              :label="$t(tab.label)"
              exact
            >
              <q-btn
                @click="closeTab(tab)"
                flat
                icon="close"
                round
                class="z-top"
              />
            </q-route-tab>
          </q-tabs>
    

    Class z-top or z-max doesn’t help. Please, help. Thanks!

    Exapmle

    Pkg quasar........ v1.0.0-beta.13
    Pkg @quasar/app... v1.0.0-beta.13



  • Can anyone help?



  • Same problem here—I made a codepen for easier experimentation: https://codepen.io/dsl101/pen/WmVbOE



  • Solution:
    QTab had no-pointer-events class, just add all-pointer-events to a element inside the QTab who needs be clickable. ©
    Many thanks to @Tobias-Mesquita and khuguet on Discord channel!


Log in to reply