Блог

На некоторых мобильных устройствах (например, iPhone 5 / SE) vuetify v-bottom-navigation выглядит следующим образом:

Чтобы предотвратить это, я хочу переместить кнопки ближе друг к другу, чтобы это выглядело как на других устройствах:

Мой подход состоял в том, чтобы передать small prop / class, но это не сработало:

 <v-bottom-navigation>

  <v-btn small>
    <v-icon>mdi-home-outline</v-icon>
  </v-btn>
  <!-- ... more buttons here ... -->

</v-bottom-navigation>
 

Вы можете переопределить отступы и минимальную ширину кнопок и настроить их в соответствии с вашими потребностями:

 <v-bottom-navigation>

  <v-btn class="my-btn" small>
    <v-icon>mdi-home-outline</v-icon>
  </v-btn>
  <!-- ... more buttons here ... -->

</v-bottom-navigation>

.v-btn.my-btn {
  min-width: 20px !important;
}
 

Также взгляните на API компонентов и переменные SASS