Компонент H

Компонент H в библиотеке Naive UI используется для создания заголовков различного уровня в интерфейсе. Он предоставляет гибкий API для управления стилем, размером и семантикой заголовков, полностью интегрируясь с темой и системой стилей Naive UI. Компонент является оберткой над стандартными HTML-тегами h1–h6, но добавляет возможности типизации, адаптации под тему и управления визуальными свойствами через пропсы.

Синтаксис и базовое использование

import { H } from 'naive-ui'

<H level={1}>Заголовок первого уровня</H>
<H level={3}>Заголовок третьего уровня</H>
  • level — обязательный проп, задающий уровень заголовка. Допустимые значения: от 1 до 6.
  • children — содержимое заголовка, может быть текстом или JSX-элементами.

При указании level={1} компонент рендерит <h1>, при level={2} — <h2> и так далее до <h6>.

Управление стилем через пропсы

Компонент H поддерживает ключевые пропсы для визуальной настройки:

  • size — задает визуальный размер заголовка. Допустимые значения: tiny, small, medium, large, huge. Размер влияет только на CSS-стили, не меняя семантический тег.
  • type — цвет текста в соответствии с типовой палитрой Naive UI: primary, success, warning, error, info, default.
  • strong — boolean-проп для задания жирного текста (<strong> внутри заголовка).
  • underline — boolean-проп для подчеркивания текста заголовка.

Пример:

<H level={2} size="large" type="primary" strong underline>
  Важный заголовок
</H>

Интеграция с темой

Компонент H автоматически адаптируется под текущую тему Naive UI. При смене светлой или темной темы цвета заголовков будут корректно подстраиваться. Это обеспечивает единообразие интерфейса без необходимости ручного переопределения стилей.

import { createTheme, NConfigProvider } from 'naive-ui'

const myTheme = createTheme({
  common: {
    primaryColor: '#1a73e8',
  },
  H: {
    textColor: '#333',
  },
})

<NConfigProvider theme-overrides={myTheme}>
  <H level={1}>Заголовок с кастомной темой</H>
</NConfigProvider>

Вложенные заголовки и семантика

Использование компонента H позволяет сохранять правильную семантику документа. Даже при кастомизации размера, тег h1–h6 сохраняется, что важно для SEO и доступности:

<div>
  <H level={1}>Главная тема</H>
  <H level={2}>Подтема 1</H>
  <H level={2}>Подтема 2</H>
  <H level={3}>Подраздел</H>
</div>

Таким образом, визуальное оформление и семантика документа остаются независимыми.

Комбинирование с другими компонентами

Компонент H часто используется совместно с NCard, NDivider или NLayout для построения структурированных интерфейсов. Он позволяет создавать блоки с заголовками и подзаголовками без потери консистентного стиля.

<NCard title={<H level={3} type="info">Информация о пользователе</H>}>
  <p>Детали профиля...</p>
</NCard>

Динамические заголовки

Благодаря возможности передачи JSX или реактивных данных в children, заголовки могут меняться динамически:

const [titleLevel, setTitleLevel] = useState(1)
const [titleText, setTitleText] = useState('Динамический заголовок')

<H level={titleLevel}>{titleText}</H>

Изменение состояния titleLevel или titleText автоматически обновляет отображение заголовка.

Доступность и SEO

  • Семантические теги h1–h6 гарантируют корректное восприятие заголовков скринридерами.
  • Проп level напрямую влияет на тег, что позволяет строить иерархию контента правильно.
  • Поддержка текстовых атрибутов, таких как strong, underline и type, позволяет визуально выделять важные части без потери семантики.

Расширенные возможности

Компонент H допускает кастомизацию через CSS-переменные темы Naive UI и Scoped CSS. Можно переопределять стили отдельных уровней заголовков:

.h-level-1 {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.5px;
}
.h-level-2 {
  color: #ff5722;
}

Подключение классов выполняется через class или className:

<H level={1} class="h-level-1">Кастомный заголовок</H>

Компонент H объединяет семантику, гибкость стиля и интеграцию с темами Naive UI, что делает его ключевым инструментом для построения заголовков в современных интерфейсах на JavaScript.

Оглавление