Как настроить поля содержимого панели приложения Vuetify, например панель приложения StackOverflow - PullRequest
Новая
       21

Как настроить поля содержимого панели приложения Vuetify, например панель приложения StackOverflow

0 голосов
/ 14 марта 2020

Я новичок в Vuetify и хочу установить поля содержимого панели приложения, как на этом сайте. Итак, я могу сделать это: 

    <v-app-bar app color="primary" src="https://picsum.photos/1920/1080?random">
      <template v-slot:img="{ props }">
        <v-img v-bind="props" gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"></v-img>
      </template>    
      <template v-slot:default>
        <v-toolbar-title>Title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </template>

      <template v-slot:extension>
        <a style="color: white">Link 1</a>

        <v-spacer></v-spacer>

        <a style="color: white">Link 2</a>
      </template>
    </v-app-bar>

Я получаю это:

Wide appbar Если я сделаю что-то вроде этого: 

<v-app-bar app color="primary"  src="https://i.picsum.photos/id/660/1920/1080.jpg" style="width:1024px; margin:auto">

Я получаю это:

enter image description here

Я хотел бы, чтобы полоса с фоном выглядела как первое изображение с шириной 100% и элементы в строке с шириной = чем угодно и полем: автоматически, как на втором изображении. Как бар здесь на переполнении стека. Я пытался обернуть содержимое в вещи, но «v-слот шаблона может появляться только на уровне root внутри принимающего компонента». Как я могу заставить это сделать это?

...