Изменить заполнение vuetify v-extension-panel-content - PullRequest
0 голосов
/ 01 мая 2020

У меня есть несколько расширенных v-расширений для визуализации структуры папок. Как в этом примере с items и innerItems

  <v-expansion-panels
     accordion
     focusable
  >
     <v-expansion-panel
        v-for="(item, x) in items"
        :key="x"
     >
        <v-expansion-panel-header> {{ item.header }}</v-expansion-panel-header>
        <v-expansion-panel-content class="v-expansion-panel-content">
           <v-expansion-panels>
             <v-expansion-panel
                v-for="(innerItem, y) in innerItems"
                :key="y"
             >
                <v-expansion-panel-header> {{ innerItem.header }} </v-expansion-panel-header>
                <v-expansion-panel-content> {{ innerItem.content }} </v-expansion-panel-content>
               </v-expansion-panel>
            </v-expansion-panels>
        </v-expansion-panel-content>
     </v-expansion-panel>
  </v-expansion-panels>

Итак, я получаю это

enter image description here

Но мне нужна внутренняя панель расширения чтобы быть на правой стороне, как это

enter image description here

Я добился этого, отредактировав .v-extension-panel-content__warp в редакторе браузера (просто чтобы получить то, что я хочу, чтобы это выглядело так) но как я могу получить доступ к этому самогенерируемому div / css -классу

enter image description here

Уже есть вопрос относительно заголовка панели ( Stylization vuetify компонент v-extension-panel__header ), но я не понимаю этот вопрос или ответ ...

Может быть, кто-то может указать мне правильное направление или была та же проблема и может показать мне способ исправить это!

Спасибо!

1 Ответ

0 голосов
/ 01 мая 2020

Итак, я исправил это так

#innerExPan > * {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 50px;
}

И добавил идентификатор к

<v-expansion-panel-content id="innerExPan">
...
...