【问题标题】:Center content in tabs with Vuetify使用 Vuetify 将标签中的内容居中
【发布时间】:2020-08-18 15:27:35
【问题描述】:

我有 v-tabs 来显示时间。 单击箭头后,我想将时间居中。

但它不起作用。在下图中,我们可以看到时间没有对齐中心。 是否有一些 css 可以应用在上面?

<v-card
  class="mt-1 ml-1 mr-1 mb-0"
  v-if="item.vagas.length"
>
<v-tabs
    dark
    background-color="teal darken-3"
    show-arrows="always"
    center-active
    centered
    height="30"
    v-model="tabHora"
>
 <v-tabs-slider color="teal lighten-3"></v-tabs-slider>
 <v-tab
  v-for="ob in item.vagas"
  :key="ob.id"
  @click="horaClicked(item, horario, ob)"
 >
  {{ ob.hora }}
 </v-tab>
</v-tabs>
</v-card>

【问题讨论】:

    标签: vue.js vuetify.js


    【解决方案1】:

    在我回答之前,顺便说一句,您的代码中有一个错误 - show-arrows="always" 应该是 show-arrows。现在来看看我用Vuetify.js 和他们的v-tab 组件测试过的东西......

    试用结果:

    所以我尝试了多种fixed-tabs/grow/css 宽度,应用v-flex/v-layouts 来控制标签大小和对齐中心...没有成功。我似乎无法始终如一地控制v-tab 组件及其center-active 属性的行为方式,尤其是当浏览器大小从xl 变为xs(即桌面变为移动)时。因此,对于您想要实现的目标,我建议您采用不同的方法,您可以针对不同的浏览器尺寸进行一致的控制。

    建议(如果坚持使用导航箭头设计):

    如果这是您所坚持的设计,Vuetify 不会轻易让您实现这一目标。 Vuetify 在移动到移动视图时依赖于项目/对象的分组。对于这种设计,我建议您使用类似下面的代码 sn-p 的东西。需要注意的是,您必须对 V 形按钮进行编码(使用 @click)才能选择不同的时间。您也可以申请transitions 来制作时代变化的动画。

          <v-card flat dark>
            <v-layout row wrap align-center>
              <v-flex xs12 text-xs-center align-self-center>
                <v-card-text>
                  <v-layout row align-center>
                    <v-flex>
                      <v-btn
                        flat
                        icon
                        dark
                        color="success"
                      >
                        <v-icon>chevron_left</v-icon>
                      </v-btn>
                    </v-flex>
    
                    <v-flex>
                      <div class="title font-weight-light">
                        {{ testValue }}
                      </div>
                    </v-flex>
    
                    <v-flex>
                      <v-btn
                        flat
                        icon
                        dark
                        color="success"
                      >
                        <v-icon>chevron_right</v-icon>
                      </v-btn>
                    </v-flex>
                  </v-layout>
                </v-card-text>
              </v-flex>
            </v-layout>
          </v-card>
    

    建议(如果设计灵活):

    如果您希望继续使用 Vuetify 的标准组件,您可能不得不采用他们使用组的方法,并且可能探索不同的组件,例如 button groupsslide groups(滚动到底部以查看居中的活动项) .

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-02-19
      • 2021-04-24
      • 2020-12-31
      • 1970-01-01
      • 1970-01-01
      • 2012-02-28
      • 2019-08-17
      • 1970-01-01
      相关资源
      最近更新 更多