如何调整V-SELECT的大小？ [英] How to resize the size of the Vuetify's v-select?

问题描述

我在RTL项目中使用了VueJS 2和Vutify。我有以下代码：

<v-card-title>
  <div class="row">
    <div class="col-sm-12 col-md-9" style="text-align: right; ">
      <div class="ml-1 inline">
        הצג
      </div>
      <v-select
        v-model="tableItemsPerPage"
        :items="itemsPerPageOptions"
        outlined
        single-line
        hide-details
        dense
        class="inline"
        style="width:90px;"
      ></v-select>
      <div class="mr-1 inline">
        פריטים
      </div>
    </div>
    <div class="col-sm-12 col-md-3" style="text-align: left;">
      <v-text-field
        v-model="tableSearchText"
        class="shrink mx-4"
        append-icon="mdi-magnify"
        label="חיפוש"
        filled 
        rounded 
        dense 
        single-line 
        hide-details
      ></v-text-field>
    </div>
  </div>
</v-card-title>

这将创建以下用户界面：

我似乎想不出如何调整v-select的大小，因为它看起来有点笨拙。已尝试以下解决方案：vuetify.js v-select minimum height limitation?，但不起作用。我如何才能使其工作？

编辑：我想要这样的东西：

选择框较小，位于搜索框的中间(从高度角度)。下拉列表周围关键字的所需字体大小为：

  .v-card__subtitle, .v-card__text, .v-card__title {
    padding: 0px;
    font-size: 1rem;
  }

推荐答案

我标记的css更改了v-select的大小。还要注意在标记(HTML)中所做的更改。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify({
    rtl: true,
  }),
  data: () => ({
    tableItemsPerPage: 100,
    itemsPerPageOptions: [10, 20, 50, 100],
    tableSearchText: '',
    isSelectLarge: false
  })
})

#app {
  background-color: whitesmoke;
}

/* 👇 from here */

#app .tiny-select {
  max-width: 5rem;        /* 👈 reduces width */
  max-height: 2.25rem;
}
#app .tiny-select fieldset {
    max-height: 2.25rem;
    margin-top: 0.25rem;
}
#app .tiny-select .v-input__control > [role="button"] {
  padding: 0 .5rem;       /* 👈 reduces horizontal padding */
  min-height: 2.375rem;
}

/* 👆 till here.  */

@media(min-width: 456px) {
  #app .tiny-input {
    flex-grow: 0;
  }
}
#app .smooth-input {
  transition: flex-grow 0.3s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  flex-basis: 10rem;
}
#app .smooth-input.v-input--is-focused {
  flex-basis: 20rem;
}
@media(max-width: 620px) {
  #app .smooth-input.v-input--is-focused {
    flex-basis: 100%;
  }
}

/* scss:

#app {
  background-color: whitesmoke;
  .tiny-select {           
    max-width: 5rem;     
    max-height: 2.25rem;
    fieldset {
      max-height: 2.25rem;
      margin-top: 0.25rem;
    }
    .v-input__control > [role="button"] {
      padding: 0 .5rem;
      min-height: 2.375rem;
    }
  }
  @media(min-width: 456px) {
    .tiny-input {
      flex-grow: 0;
    }
  }
  .smooth-input {
    transition: flex-grow .3s cubic-bezier(.4,0,.2,1), flex-basis .3s cubic-bezier(.4,0,.2,1) .15s;
    flex-basis: 10rem;
    &.v-input--is-focused {
      flex-basis: 20rem;
      @media(max-width: 620px) {
        flex-basis: 100%;
      }
    }
  }
}

*/

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-container>
      <v-card elevation="1" shaped>
        <v-card-title>
          <v-container fluid>
            <v-row>
              <v-col class="py-0">
                <div class="d-flex justify-space-between align-center flex-wrap">
                  <div class="d-flex align-center flex-wrap my-3">
                    <div class="ml-1 inline">הצג</div>
                    <v-select
                      v-model="tableItemsPerPage"
                      :items="itemsPerPageOptions"
                      outlined
                      single-line
                      hide-details
                      dense
                      class="inline tiny-select"
                    ></v-select>
                    <div class="mr-1 inline">פריטים</div>
                  </div>
                  <v-text-field
                    v-model="tableSearchText"
                    class="my-3 smooth-input mr-4"
                    :class="[isSelectLarge ? 'flex-grow-1' : 'tiny-input']"
                    append-icon="mdi-magnify"
                    label="חיפוש"
                    filled
                    rounded
                    dense
                    single-line
                    hide-details
                  ></v-text-field>
                </div>
              </v-col>
            </v-row>
          </v-container>
        </v-card-title>
      </v-card>
      <v-row>
        <v-col :cols="4">
          <v-switch
            v-model="isSelectLarge"
            label="stretch select"
          ></v-switch>
        </v-col>
      </v-row>
    </v-container>
  </v-app>

这篇关于如何调整V-SELECT的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！