Как стилизовать цвет фона и размер v-списка в Vuetify?

Question

Я новичок в Vuetify и хотел бы сделать что-то вроде этого. По сути, у меня есть панель навигации в качестве боковой панели, и я хочу иметь возможность изменять цвет фона одного из списков при наведении курсора, когда он выбран. Документация Vuetify, кажется, не обсуждает это. И я искал везде, любая помощь будет оценена.

Answer 1

Вы можете назначить "v-list-tile", который является битом, который вы хотите стилизовать, классом и включить в него свой css. Таким образом, ваш HTML-код v-navigation-box будет выглядеть так:

<v-navigation-drawer
      dark
      permanent
    >
      <v-list>
        <v-list-tile
          class="tile"
          v-for="item in items"
          :key="item.title"
          @click=""
        > 
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action> //etc....

Как видите, я добавил class="tile" к "v-list-tile".

Теперь просто добавьте класс .tile на свои страницы css:

<style scoped>
  .tile {
    margin: 5px;
    border-radius: 4px;
  }
  .tile:hover {
    background: green;
  }
  .tile:active {
    background: yellow;
  }
</style>

и это должно сделать работу.