Как использовать карты в Vuetify

Компонент Card в Vuetify можно использовать для самых разных целей. Мы можем использовать его для переноса компонента панели инструментов, для содержания списка или просто для отображения статического изображения. Мы можем настроить определенные функции карты, такие как цвет, высоту и размер. В этой статье вы узнаете, как создать простую карточку с помощью библиотеки пользовательского интерфейса.

Компонент «v-card»

v-card — это имя компонента, предоставленного Vuetify для создания карточек. Мы создали его в приведенном ниже коде и настроили его высоту и ширину с помощью соответствующих реквизитов:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card height="150" width="350"></v-card>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Компонент «v-card-title»

v-card поставляется вместе с некоторыми дополнительными компонентами, предназначенными для использования в нем (как дочерние элементы). Одним из таких является компонент v-card-title. Как следует из названия, он позволяет нам установить название карты. Например:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card height="150" width="350">
        <v-card-title>data.zip</v-card-title>
      </v-card>
    </div>
  </v-app>
</template>
...

Компонент «v-card-subtitle»

Мы также можем установить субтитры карточек с помощью компонента v-card-subtitle. Будучи подзаголовком, он имеет обычный вес шрифта и меньший размер шрифта, чем заголовок.

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card height="150" width="350">
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
      </v-card>
    </div>
  </v-app>
</template>
...

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Скачать бесплатную копию здесь!

Компонент «v-card-text»

Мы можем использовать компонент v-card-text, чтобы добавить текст для тела карты:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card width="350">
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
        <v-card-text
          >You can now download an archive of all your data within the next 24
          hours.</v-card-text
        >
      </v-card>
    </div>
  </v-app>
</template>
...

Компонент «v-card-actions»

Компонент v-card-actions служит контейнером для интерактивных компонентов (типа кнопок), которые позволяют нам выполнять определенные действия, связанные с информацией на карточке:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card width="350">
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
        <v-card-text
          >You can now download an archive of all your data within the next 24
          hours.</v-card-text
        >
        <v-card-actions>
          <v-btn text color="primary">Download</v-btn>
          <v-btn text>Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </div>
  </v-app>
</template>
...

Обрисованные карты

Установка для свойства outlined компонента v-card значения true удалит возвышение карты:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card width="350" outlined>
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
        <v-card-text
          >You can now download an archive of all your data within the next 24
          hours.</v-card-text
        >
        <v-card-actions>
          <v-btn text color="primary">Download</v-btn>
          <v-btn text>Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </div>
  </v-app>
</template>
...

«Возвышенная» опора

Мы также можем установить конкретную высоту, которую мы хотим для карты с реквизитом elevation:

<template>
  <v-app>
    <div class="d-flex justify-center ma-4">
      <v-card width="350" elevation="5">
        <v-card-title>data.zip</v-card-title>
        <v-card-subtitle>Your data is ready</v-card-subtitle>
        <v-card-text
          >You can now download an archive of all your data within the next 24
          hours.</v-card-text
        >
        <v-card-actions>
          <v-btn text color="primary">Download</v-btn>
          <v-btn text>Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </div>
  </v-app>
</template>
...

Краткое содержание

Vuetify предоставляет компонент v-card для создания карточек, которые используются для различных функций.

Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе новых полезных материалов от нас!

Получить обновленную статью на codingbeautydev.com.