Vuetify: нестандартный стиль разбиения на страницы

Question

То, что я пытаюсь сделать, это панель инструментов с управлением пагинацией, выровненным вправо с меньшими кнопками управления пагинацией.

Для этого я добавил:

1. Обтекание v-pagination в span (v-spacer без этого не работает)
2. Добавить v-spacer
3. Пользовательский css

Но после всего этого добавлен контроль пагинации не работает должным образом.

Ниже приведена демонстрация этой проблемы, хотя оба элемента управления настроены на отображение 5 страниц, а элемент управления с пользовательским стилем не отображает все 5 значков.

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
      pageDefault: 1,
      pageCustom: 1,
    }),
  });

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

.custom .v-pagination__navigation {
  height: 26px !important;
  width: 26px !important;
}

.custom .v-pagination__navigation .v-icon {
  font-size: 16px !important;
}

.custom .v-pagination__item {
  height: 26px !important;
  min-width: 26px !important;
  font-size: 0.85rem !important;
}

.right {
  width: auto !important;
  margin-left: auto !important;
}

<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@4.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-content>

        <v-toolbar
          dark
          dense
        >
          <v-toolbar-title>With Default Style</v-toolbar-title>
          <v-spacer> </v-spacer>
          <span>
            <v-pagination
              v-model="pageDefault"
              :length="5"
              light
              circle
            />
          </span>
        </v-toolbar>


        <v-toolbar
          dark
          dense
        >
          <v-toolbar-title>With Custom Style</v-toolbar-title>
          <v-spacer> </v-spacer>
          <span>
            <v-pagination
              class="custom"
              v-model="pageCustom"
              :length="5"
              light
              circle
            />
          </span>
        </v-toolbar>

        <v-toolbar
          dark
          dense
        >
          <v-toolbar-title>Codeply-er suggestion</v-toolbar-title>
          <v-pagination
            class="custom right"
            v-model="pageCustom"
            :length="5"
            light
            circle
          />
        </v-toolbar>

      </v-content>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Answer 1

Я бы использовал auto margin-left и width на .custom ...

.custom {
    width: auto;
    margin-left: auto;
}

Тогда вы можете убрать проставку ...

  <v-toolbar
      dark
      dense>
     <v-toolbar-title>With Custom Style</v-toolbar-title>
     <v-pagination
          class="custom"
          v-model="pageCustom"
          :length="5"
          light
          circle />
  </v-toolbar>

Демо