1- Использование компонентных свойств

У многих компонентов есть реквизиты, которые позволяют быстро менять стиль. Например, v-card v-btn v-chip компоненты и многие компоненты имеют color

Когда я начал использовать Vue в качестве внешнего фреймворка, я попытался использовать его с Bootstrap из простого старого CSS. Однако вскоре я понял, что дела идут не так быстро, как мне хотелось. Затем я обнаружил Vuetify как фреймворк CSS / компонентов для материального дизайна, который можно использовать вместе с Vue.js для расширения возможностей ваших инструментов разработки. В этой статье я хотел бы быстро обсудить, как можно стилизовать компоненты с помощью Vue. Чаще всего приходит в голову простой старый CSS. Однако у Vuetify несколько иной подход. Итак, давайте покопаемся и посмотрим, как можно стилизовать компоненты по-разному и какой из них является наиболее продуктивным.

1- Использование компонентных свойств

У многих компонентов есть реквизиты, которые позволяют быстро менять стиль. Например, v-card v-btn v-chip компоненты имеют свойство color, которое можно установить следующим образом:

<v-card color="orange">...</v-card>

Другие реквизиты, которые позволяют быстро менять стиль, выглядят примерно так:

<v-container px-2>...</v-container>

В этом случае мы меняем отступы в компоненте с помощью этой опоры:

<v-card color="orange">...</v-card>

Другие реквизиты, которые позволяют быстро менять стиль, выглядят примерно так:

<v-container px-2>...</v-container>

В этом случае мы также меняем отступы в компоненте с помощью этой опоры.

<template>
  <v-container px-5>
    <v-row justify="center">
      <v-col cols="6">
        <v-card color="green">
          <v-card-title>Chocolate cheesecake recipe</v-card-title>
          <c-card-text>
            <ul>
              <li>5 eggs</li>
              <li>1 cup of warm milk</li>
              <li>2 cups of flour</li>
              <li>1/2 cup of sugar</li>
              <li>...</li>
            </ul>
          </c-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

Предварительный просмотр домашней страницы

Как вы можете видеть выше, вы можете просто управлять цветом, заполнением, выравниванием компонента карты, просто используя несколько реквизитов, без использования CSS.

2- Использование свойства класса

Каждый компонент Vuetify имеет очень удобное свойство, называемое классом. И вы можете использовать этот класс для изменения многих свойств стиля, таких как цвет, шрифт, отступы, выравнивание и т.д. Однако вам нужно знать, какие классы CSS использовать для внесения изменений. Vuetify уже определила множество классов CSS для управления многими стилями. Например, чтобы изменить цвет шрифта на красный, вы просто скажете: class="red--text" или чтобы изменить типографику или шрифты, вы можете использовать один из предопределенных стилей шрифтов, подобных этому class="subtitle-2". Вы также можете изменить цвет фона компонента, используя свойство класса, например, class="grey".

Давайте изменим приведенный выше пример, с использованием свойства класса.

<template>
  <v-row justify="center">
    <v-col cols="6">
      <v-card color="green">
        <v-card-title class="green darken-4">Chocolate cheesecake recipe</v-card-title>
        <v-card-text class="pt-2">
          <ul class="subtitle-2">
            <li>5 eggs</li>
            <li>1 cup of warm milk</li>
            <li>2 cups of flour</li>
            <li>1/2 cup of sugar</li>
            <li class="red--text">1 lbs Philadelphia cream cheese </li>
            <li>...</li>
          </ul>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

Как вы можете видеть в приведенном выше коде, мы изменили цвет текста и фона с помощью class prop. Таким же образом меняем и шрифт. Я также хочу упомянуть, что Vuetify создал классы CSS для всех этих стилей и сделал их доступными без использования CSS

3- Использование внутрикомпонентного стиля и CSS

Третий вариант, который поощряет Vuetify – это использование стилей CSS в отдельных файловых компонентах. В этом методе вы просто пишете простой старый CSS внутри <style>...</style> тега вашего компонента. Давайте посмотрим, как с помощью этого подхода можно изменить несколько стилей.

<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="6">
        <v-card color="green">
          <v-card-title class="green darken-4">Chocolate cheesecake recipe</v-card-title>
          <v-card-text class="pt-2">
            <ul class="subtitle-2">
              <li>5 eggs</li>
              <li>1 cup of warm milk</li>
              <li>2 cups of flour</li>
              <li>1/2 cup of sugar</li>
              <li class="red--text">1 lbs Philadelphia cream cheese </li>
              <li>...</li>
            </ul>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

<style>
ul {
  list-style-type: square;
}
.v-card__title {
  font-style: italic;
}
.v-card__text {
  color: blue!important;
}
</style>

Стоит отметить, что для того, чтобы использовать CSS, вам необходимо знать синтаксис запросов выбора CSS. Это означает, что если вы хотите изменить шрифт текста на курсив, вам нужно знать, как выбрать подходящий div. Для этого я использовал инструменты разработчика Chrome, чтобы проверить заголовок, чтобы узнать, какое имя класса для этого div. Затем я использовал CSS, чтобы изменить стиль таким образом: .v-card__title { font-style: italic; }, в этом случае я полагался на классы Vuetify. Помимо этого, этот метод позволит вам использовать ваши простые старые приемы CSS для стилизации чего угодно.

Мое практическое правило: не используйте этот метод, если у Vuetify нет опоры или класса, который делает то, что вы ищете.

4- Использование автономного файла CSS

В этом методе мы будем использовать простые старые приемы CSS, такие как метод выше, за исключением того, что мы будем писать наш CSS во внешнем файле CSS. Этот метод был бы более подходящим, если бы у нас был общий CSS, который будет использоваться несколькими компонентами. Способ реализовать это – сохранить файл CSS, а затем импортировать его в конкретный компонент:

<template>
...
</template>
<script>
...
</script>
<style>
@import './assets/styles/main.css'
</style>

Вывод

Как вы можете видеть в приведенном выше примере, Vuetify и Vue очень гибки с точки зрения решения некоторых задач. Однако вы должны проявлять осторожность при использовании методов, упомянутых выше.