首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何设置v-btn切换的最大宽度

如何设置v-btn切换的最大宽度
EN

Stack Overflow用户
提问于 2020-10-13 18:17:50
回答 1查看 478关注 0票数 0

我正在试着用vuetify让我的应用变得更有风格。

但是当我使用移动格式时,我的组件对于我的模式来说太宽了。

My ugly modal

代码语言:javascript
运行
复制
<template>
  <v-container>
    <v-form @submit="addTime">
      <date-picker-component title="Date du jour"/>
      <p>Lieu de départ</p>
      <v-btn-toggle
          :value="getCurrentJournee.lieu_depart"
          mandatory
          @change="setLieuDepart"
      >
        <v-btn
            :value="lieu.domicile">
          Domicile
        </v-btn>

        <v-btn :value="lieu.entreprise">
          Entreprise
        </v-btn>
      </v-btn-toggle>
      <time-picker-component title="Heure de départ" heure="heuredepart"/>
      <time-picker-component title="Heure sur premier chantier" heure="premierchantier"/>
      <p>Temps de pause</p>
      <v-btn-toggle
          v-model="getCurrentJournee.temps_pause"
          shaped
          mandatory
          @change="setTempsPause"
      >
        <v-btn value="30">
          30'
        </v-btn>

        <v-btn value="45">
          45'
        </v-btn>

        <v-btn value="60">
          1h
        </v-btn>

        <v-btn value="75">
          1h15'
        </v-btn>
        <v-btn value="90">
          1h30'
        </v-btn>
      </v-btn-toggle>
      <time-picker-component title="Départ du dernier chantier" heure="dernierchantier"/>
      <time-picker-component title="Heure d'arrivée" heure="heurearrivee"/>


      <p>Lieu de retour</p>
      <v-btn-toggle
          :value="getCurrentJournee.lieu_arrivee"
          mandatory
          @change="setLieuRetour"
      >
        <v-btn :value="lieu.domicile">
          Domicile
        </v-btn>

        <v-btn :value="lieu.entreprise">
          Entreprise
        </v-btn>
      </v-btn-toggle><br><br>

      <v-btn type="submit" color="green" dark @click="$emit('close')"> Enregistrer </v-btn>
      <v-btn color="black" dark @click="$emit('close')"> Fermer </v-btn>
    </v-form>
  </v-container>
</template>

下面是时间表单,在它所处的模式下

代码语言:javascript
运行
复制
<v-dialog
            v-model="modalVisible"
            persistent
            max-width="500px"
            class="ma-0 pa-0"
        >
          <v-card>
            <v-card-title>
              Enregistrement heures
            </v-card-title>
            <v-divider></v-divider>
            <v-card-text>
              <v-container>
                <!-- <v-flex xs6 lg10>                 -->
                <time-form @close="modalVisible = false"></time-form>
                <!-- </v-flex> -->
              </v-container>
              <!-- <small>* précise les champs obligatoires</small> -->
            </v-card-text>
          </v-card>
        </v-dialog>

有什么线索能让我缩小范围来适应吗?最大宽度之类的东西。请救救我,我必须在周五之前提交这个,哈哈。

编辑:为了更好的理解,我添加了代码,我正在尝试让v-btn切换到第一段代码中,当我要移动的时候,我尽量不使用v-select,尽管我越来越多地考虑它。

EN

回答 1

Stack Overflow用户

发布于 2021-05-03 16:12:49

如果你想换行按钮,你可以在v-btn-class=中添加“flex- wrap”

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64333278

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档