Как добавить текст над разделителями карусели с помощью Vuetify? - PullRequest
Новая
       23

Как добавить текст над разделителями карусели с помощью Vuetify?

0 голосов
/ 11 июня 2019

Я использую Vue / Vuetify и мне нужно добавить текст в слайды карусели для описания.Я думаю, что размещение текста над разделителями и под изображением - лучшее место для этого.Я бы предпочел не накладывать текст на изображение.Документация Vuetify не дает никаких примеров для этого.Как это можно сделать?

1 Ответ

1 голос
/ 11 июня 2019

Вы можете создать собственный дизайн карусели внутри тегов v-carousel-item, используя элементы vuetify для размещения текста в нужном вам месте. Пример на cedepen 

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
    <v-layout row wrap justify-center>
      <v-flex xs6>
         <v-carousel hide-delimiters>
          <v-carousel-item
            v-for="(item,i) in items"
            :key="i"  
          >
            <v-img
                    :src="item.src"
                   class="fill-height"
                  >
                    <v-container
                      fill-height
                      fluid
                      pa-0 ma-0

                    >
                      <v-layout fill-height align-end>
                        <v-flex xs12>
                          <v-card color="red" class="pa-2" >
                          <span class="headline white--text" v-text="item.src">                               </span>
                          </v-card>
                        </v-flex>
                      </v-layout>
                    </v-container>
                  </v-img>
             </v-carousel-item>
           </v-carousel>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Обновлено 

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
    <v-layout row wrap justify-center>
      <v-flex xs6>
         <v-carousel>
          <v-carousel-item
            v-for="(item,i) in items"
            :key="i"  
            :src="item.src"
          >

                    <v-container
                      fill-height
                      fluid
                      pa-0 ma-0 pb-3 

                    >
                      <v-layout fill-height align-end pb-4 mb-4>
                        <v-flex xs12>
                          <v-card color="red" class="pa-2">
                          <span class="headline white--text" v-text="item.src">                               </span>
                          </v-card>
                        </v-flex>
                      </v-layout>
                    </v-container>

             </v-carousel-item>
           </v-carousel>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>
...