如何使用Vuetify在转盘的定界符上方添加文本？

J·达内尔

我正在使用Vue / Vuetify，需要在轮播幻灯片中添加文字以进行描述。我认为将文本放在定界符上方和图像下方是最佳选择。我宁愿不将文本覆盖在图像上。Vuetify文档没有为此提供任何示例。如何才能做到这一点？

沙比

您可以在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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。