Блог

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

Я пробовал что-то подобное внутри v-card :

 <v-badge overlap icon="mdi-shield-account"></v-badge>
 

Я играл с offset-x offset-y реквизитом и, но я не уверен, подходит ли это для исправления смещений, учитывая, что ширина карты может меняться в зависимости от размера экрана. Я не хочу возвращаться к ненужному вставлению пользовательских классов и стилей в каждый компонент Vuetify. Есть ли более «полезный» способ сделать это?

Моя полная карта выглядит примерно так:

 <v-card outlined class="px-5 py-5">
  <v-badge overlap icon="mdi-shield-account"></v-badge>
  <v-form ref="form-personal">
    <v-text-field label="Firstname" prepend-icon="mdi-map-marker"></v-text-field>
    <v-text-field label="Lastname" prepend-icon="mdi-map-marker"></v-text-field>
  </v-form>
</v-card>
 

Я сделал демонстрацию: Демо

Это важный момент:

 <v-row justify="center">
    <v-col cols="auto">
        <v-sheet
            class="rounded-circle"
            color="blue"
            :height="50"
            :width="50"
            style="margin-top: -60px"
        >
            <v-icon class="px-3 py-3">
                mdi-shield-account
            </v-icon>
        </v-sheet>
    </v-col>
</v-row>
 

Я бы посоветовал использовать v-образный лист, центрировать его с v-row justify="center" помощью и v-col cols="auto" , а затем переместить этот лист вверх margin-top: -55px . Таким образом, вы можете легко изменить ширину, высоту или цвет без дополнительного css.

Он также «отзывчивый», но вам, возможно, придется протестировать его самостоятельно, чтобы убедиться в этом.