Caption

Заголовок раздела с содержимым под ним. Компонент обеспечивает единое оформление заголовков разделов и изолирует их от стилей окружающей страницы.

Основа компонента

Компонент построен на Typography Title из Ant Design Vue.

Настройки профиля

Здесь может располагаться содержимое раздела.

<Caption label="Настройки профиля">
  <p>Здесь может располагаться содержимое раздела.</p>
</Caption>

Уровень заголовка

По умолчанию используется level="4". Доступны уровни от 1 до 5.

Значение level определяет семантический HTML-заголовок (h1–h5) и его размер. Независимо от уровня компонент убирает лишние верхние отступ, рамку и padding, которые могут приходить от внешних стилей. Стандартный уровень 4 отображается в компактном размере 17px с высотой строки 20px.

<Caption label="Основной раздел" :level="2">
  <p>Содержимое основного раздела.</p>
</Caption>

Содержимое раздела

Default-слот располагается сразу после заголовка. В него можно передавать текст, Form-компоненты, таблицы и произвольную разметку.

<Caption label="Параметры">
  <Form :model="model">
    <FormInput v-model:value="model.name" label="Название" />
    <FormSwitch v-model:checked="model.enabled" label="Включено" />
  </Form>
</Caption>

Props и слоты

Prop	Тип	По умолчанию	Описание
label	string	обязательный	Текст заголовка
level	1 | 2 | 3 | 4 | 5	4	Уровень Typography Title

Компонент также добавляет заголовку CSS-класс library-caption-title, который можно использовать для локальной настройки оформления.