Типографика

Библиотека Quasar предоставляет полный набор инструментов для работы с типографикой, обеспечивая единый стиль текста, удобное управление размерами, цветами, межстрочными интервалами и визуальной иерархией. Основой типографики в Quasar служат классы CSS и компоненты, которые позволяют быстро и гибко стилизовать текст в интерфейсе.

Заголовки и подзаголовки

Quasar использует систему классов заголовков, аналогичную Material Design:

  • text-h1 — основной крупный заголовок;
  • text-h2, text-h3 — подзаголовки средней важности;
  • text-h4, text-h5, text-h6 — более мелкие заголовки для подструктуры.

Пример использования:

<h1 class="text-h1">Главный заголовок</h1>
<h2 class="text-h2">Подзаголовок уровня 2</h2>
<h3 class="text-h3">Подзаголовок уровня 3</h3>

Каждый заголовок автоматически наследует оптимальный размер шрифта, вес и межстрочный интервал. Для адаптивного дизайна Quasar позволяет использовать модификаторы размера: text-h1--lg, text-h2--sm и т.д., что изменяет размер текста на разных устройствах.

Цвет текста

Цвет текста задаётся с помощью классов text-[color]. Базовые цвета включают:

  • text-primary — основной акцентный цвет приложения;
  • text-secondary — дополнительный цвет для подзаголовков и второстепенных элементов;
  • text-positive, text-negative, text-warning, text-info — семантические цвета для состояния элементов;
  • text-dark, text-white — универсальные цвета для текста на контрастном фоне.

Пример:

<p class="text-positive">Успешная операция</p>
<p class="text-negative">Ошибка загрузки данных</p>

Также доступна возможность использования RGBA и hex-кодов через встроенные классы text-color с пользовательскими значениями.

Размеры текста

Quasar позволяет управлять размером текста с помощью классов text-[size], где размер задаётся в единицах rem или через стандартные модификаторы:

  • text-xs — очень мелкий текст;
  • text-sm — маленький;
  • text-md — средний, по умолчанию;
  • text-lg — крупный;
  • text-xl, text-xxl — дополнительные крупные размеры для акцентов.

Пример:

<p class="text-xs">Мелкий текст для примечаний</p>
<p class="text-lg">Крупный текст для важной информации</p>

Вес и стиль шрифта

Для управления жирностью и стилем текста Quasar использует следующие классы:

  • text-weight-light — тонкий шрифт;
  • text-weight-regular — обычный;
  • text-weight-medium — полужирный;
  • text-weight-bold — жирный шрифт;
  • text-italic — курсив;
  • text-underline — подчёркнутый текст;
  • text-line-through — зачёркнутый.

Пример комбинирования:

<p class="text-weight-bold text-italic">Жирный курсивный текст</p>

Межстрочный интервал и выравнивание

Контроль line-height и выравнивания достигается с помощью классов:

  • text-left, text-center, text-right, text-justify — горизонтальное выравнивание;
  • text-nowrap — предотвращает перенос строки;
  • text-truncate — усечение текста с многоточием для длинных строк;
  • q-mb-xs, q-mt-md — управляющие отступами между строками и абзацами.

Пример выравнивания:

<p class="text-center text-lg">
  Центрированный текст с крупным размером
</p>

Работа с ссылками и акцентами

Ссылки в Quasar можно стилизовать с помощью классов:

  • text-primary — для выделения ссылок основным цветом;
  • text-decoration-none — убирает стандартное подчеркивание;
  • text-underline-hover — подчеркивание появляется при наведении.

Пример:

<a href="#" class="text-primary text-underline-hover">
  Перейти к документации
</a>

Компонент QMarkupTable для типографики таблиц

Для отображения текстовых данных в табличной форме используется компонент QMarkupTable, который поддерживает все классы типографики:

<q-markup-table>
  <thead>
    <tr>
      <th class="text-h6 text-weight-bold">Название</th>
      <th class="text-h6 text-weight-bold">Описание</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-md">Заголовок</td>
      <td class="text-sm text-secondary">Подробное описание</td>
    </tr>
  </tbody>
</q-markup-table>

Это позволяет создавать структурированные интерфейсы с единым визуальным стилем текста.

Адаптивная типографика

Quasar поддерживает адаптивные классы, позволяющие менять типографику в зависимости от ширины экрана. Например:

  • text-h1 text-h1--sm — крупный заголовок на десктопе, меньший на мобильных;
  • text-lg text-md--sm — крупный текст на больших экранах и средний на маленьких.

Это упрощает создание интерфейсов с динамичным масштабированием текста без использования медиазапросов вручную.

Комбинирование классов

Все классы типографики можно комбинировать, создавая гибкие стили. Например:

<p class="text-h3 text-weight-medium text-primary text-center q-mt-lg">
  Основной заголовок с акцентом
</p>

Здесь одновременно применяются: размер, вес, цвет, выравнивание и отступ.

Типографика в Quasar строится на простом и мощном наборе CSS-классов, что позволяет поддерживать единый стиль приложения, управлять визуальной иерархией, акцентами и адаптивностью текста. Эта система универсальна и интегрируется с любыми компонентами Quasar, обеспечивая гибкость и масштабируемость интерфейсов.

Оглавление