Блог

Главная - Вопросы по программированию - vuetify: добавить кнопку к следующим vtabs

vuetify: добавить кнопку к следующим vtabs

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

Я хотел бы добавить кнопку перед vtabs , но мое решение не работает. В этом случае содержимое под vtabs имеет левое поле из-за изгиба, содержащего кнопку. Есть ли у вас решение для отображения кнопки перед v-образными вкладками и размещения содержимого под ними без полей?

Мой код :

  <v-layout row>
          <v-flex shrink>
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <v-btn v-on="on" dark fab small color="secondary" @click="showModaleAddActivite()">
                  <v-icon>add</v-icon>
                </v-btn>
              </template>
              <span>Ajouter une activité</span>
            </v-tooltip>
          </v-flex>
          <v-flex grow>
            <!-- onglets -->
            <v-tabs grow show-arrows v-model="activiteUrlSelected" color="blue-grey" dark>
              <v-tabs-slider color="deep-purple darken-3"></v-tabs-slider>
              <!-- contenus des onglets -->
              <v-tab
                :href="'#' activite.urlEncoded"
                :to="'#' activite.urlEncoded"
                v-for="(activite, index) in club.activites"
                :key="index"
              >{{ activite.code }}</v-tab>
              <v-tabs-items>
                <v-tab-item

vtabs

Комментарии:

1. Могу я спросить, что делает кнопка «Плюс»? С точки зрения дизайна, возможно, было бы лучше поместить ее внутри v-tabs

2. Кнопка «плюс» выполняет вызов ajax для добавления новой вкладки.

3. Итак, я думаю, имеет смысл, если она размещена внутри v-tab , но не на том же уровне. Вы могли бы поместить v-toolbar внутри v-tab и поместить кнопку внутри v-toolbar . Вот пример: vuetifyjs.com/en/components/tabs#tab на их веб-сайте.

4. Добро пожаловать