Vuetify Typography: стилизация текста с помощью Vuetify

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

Размер шрифта

Vuetify поставляется с классами для изменения размера шрифта и стиля текста. Они бывают следующих форматов:

.text-{value} для точки останова xs.
.text-{breakpoint}-{value} для точек останова sm, md, lg и xl.

value может быть любым из следующих:

h1
h2
h3
h4
h5
h6
subtitle-1
subtitle-2
body-1
body-2
button
caption
overline

<template>
  <v-app>
    <div class="ma-4">
      <div class="text-h1">Heading 1</div>
      <div class="text-h2">Heading 2</div>
      <div class="text-h3">Heading 3</div>
      <div class="text-h4">Heading 4</div>
      <div class="text-h5">Heading 5</div>
      <div class="text-subtitle-1">Subtitle 1</div>
      <div class="text-subtitle-2">Subtitle 2</div>
      <div class="text-body-1">Body 1</div>
      <div class="text-body-2">Body 2</div>
      <div class="text-button">Button</div>
      <div class="text-caption">Caption</div>
      <div class="text-overline">Overline</div>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Акцент шрифта

Vuetify также предоставляет классы типографики, которые управляют выделением шрифта в тексте. Material Design поддерживает выделенный курсивом текст и вес шрифта 100, 300, 400, 500, 700 и 900.

<template>
  <v-app>
    <div class="ma-4">
      <div class="font-weight-black">Black text</div>
      <div class="font-weight-bold">Bold text</div>
      <div class="font-weight-medium">Medium weight text</div>
      <div class="font-weight-regular">Normal weight text</div>
      <div class="font-weight-light">Light weight text</div>
      <div class="font-weight-thin">Thin weight text</div>
      <div class="font-italic">Italic text`</div>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

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

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

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

Выравнивание текста

text-left, text-center и text-right — классы оформления, используемые для установки выравнивания текста:

<template>
  <v-app>
    <div class="ma-4">
      <p class="text-left">Left aligned text on all viewport sizes.</p>
      <p class="text-center">Center aligned text on all viewport sizes.</p>
      <p class="text-right">Right aligned text on all viewport sizes.</p>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

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

text-sm-{value}
text-md-{value}
text-lg-{value}
text-xl-{value}

value может быть left, center или right.

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

Кроме того, в Vuetify есть классы типографики для добавления оформления текста. Есть формы text-decoration-{value}, где значение может быть none, overline, underline или line-through.

<template>
  <v-app>
    <div class="ma-4">
      <p class="text-decoration-overline">Overline text</p>
      <p class="text-decoration-underline">Underline text</p>
      <p class="text-decoration-line-through">Line-through text</p>
      <a href="#" class="text-decoration-none">Non-underlined link</a>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

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

Вспомогательные классы непрозрачности типографики — еще один удобный способ настроить выделение текста с помощью Vuetify. text--primary имеет ту же непрозрачность, что и текст по умолчанию, text--secondary используется для подсказок и вспомогательного текста. Уменьшите выделение текста с помощью text--disabled.

<template>
  <v-app>
    <div class="ma-4">
      <p class="text--primary">
        High-emphasis has an opacity of 87% in light theme and 100% in dark.
      </p>
      <p class="text--secondary">
        Medium-emphasis text and hint text have opacities of 60% in light theme
        and 70% in dark.
      </p>
      <p class="text--disabled">
        Disabled text has an opacity of 38% in light theme and 50% in dark.
      </p>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

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

Мы можем преобразовать текст с помощью Vuetify, используя классы типографики для заглавных букв. Это text-lowercase, text-uppercase и text-capitalize.

<template>
  <v-app>
    <div class="ma-4">
      <p class="text-lowercase">Lowercased text</p>
      <p class="text-uppercase">Uppercased text</p>
      <p class="text-capitalize">CapiTaliZed text</p>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Обтекание и переполнение

Класс типографики text-no-wrap позволяет нам предотвратить перенос текста:

<template>
  <v-app>
    <div class="text-no-wrap blue ma-4" style="width: 8rem">
      This text should overflow the parent.
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

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

Типографика — важный аспект любого пользовательского интерфейса. Vuetify предоставляет различные вспомогательные классы, которые позволяют нам легко изменять свойства текста.

Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе всех последних советов и руководств по Vuetify, Vue, JavaScript и т. д.

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