Vuetify — Стили текста

Vuetify — это популярная среда пользовательского интерфейса для приложений Vue.

В этой статье мы рассмотрим, как работать с фреймворком Vuetify.

Типография

Мы можем добавить классы для типографики.

Например, мы можем написать:

<template>
  <v-container>
    <v-row class="text-center">
      <div class="text-h1">heading 1</div>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

У нас есть класс text-h1 для отображения большого заголовка.

Мы можем сделать то же самое для других заголовков, тела, кнопки, заголовка, подзаголовка, надчеркивания с помощью класса с теми же именами.

Оформление текста

Vuetify также предоставляет классы text-decoration для установки этого свойства CSS.

Например, мы можем написать:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <a href="#" class="text-decoration-none">Non-underlined link</a>
        <div class="text-decoration-line-through">Line-through text</div>
        <div class="text-decoration-overline">Overline text</div>
        <div class="text-decoration-underline">Underline text</div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

для оформления текста с линиями или без них.

Преобразование текста

Мы можем преобразовать текст с помощью некоторых text- классов.

Например, мы можем написать:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">CapiTaliZed text.</p>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Мы можем изменить текст на верхний регистр, нижний регистр или заглавные буквы, как мы хотим.

Вес шрифта и курсив

Мы можем изменить толщину шрифта и включить или выключить курсив с помощью классов, предоставляемых Vuwetify.

Например, мы можем написать:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <p class="font-weight-black">Black text.</p>
        <p class="font-weight-bold">Bold text.</p>
        <p class="font-weight-medium">Medium weight text.</p>
        <p class="font-weight-regular">Normal weight text.</p>
        <p class="font-weight-light">Light weight text.</p>
        <p class="font-weight-thin">Thin weight text.</p>
        <p class="font-italic">Italic text.</p>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Классы font-weight- позволяют нам установить желаемую толщину шрифта.

Непрозрачность текста

Непрозрачность текста можно изменить с помощью разных классов.

Например, мы можем написать:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <p class="text--primary">opacity 87%.</p>
        <p class="text--secondary">opacity 60%.</p>
        <p class="text--disabled">opacity 38%.</p>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Непрозрачность можно изменить с помощью классов text--primary, text--secondary и text--disabled.

У них есть непрозрачность в списке.

Выравнивание справа налево

Vuetify имеет классы для изменения выравнивания на RTL.

Например, мы можем написать:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <p class="subtitle-2 text-center">lorem ipsum</p>
        <p
          class="text-sm-left"
        >lorem ipsum</p>
        <p
          class="text-md-left"
        >lorem ipsum.</p>
        <p
          class="text-lg-right"
        >lorem ipsum.</p>
        <p
          class="text-xl-left"
        >lorem ipsum</p>
        <p class="subtitle-2 text-center">lorem ipsum</p>
        <p class="text-start">lorem ipsum</p>
        <p class="text-end">lorem ipsum</p>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

У нас есть классы для выравнивания текста в соответствии с точками останова и положением.

Вывод

Мы можем выровнять текст и изменить стиль текста с помощью классов, предоставляемых Vuetify.