VGRollup

Сворачивание контента

Текст и списки

Ограничение высоты, три строки, скрытые элементы и короткий контент.

VGRollup оставляет превью текста или первые элементы списка. Кнопки раскрывают уже загруженное содержимое — запросов на сервер нет. Во всех примерах инициализация выполняется после появления разметки.

Текст: высота и затухание

Превью высотой 120 px. Параметры читаются из data-атрибутов, после явного init модуль создаёт кнопку и обрабатывает её клики через Data API.

Хорошее описание помогает человеку быстро понять главное. В карточке достаточно короткого превью: оно знакомит с темой, а подробности остаются доступны по кнопке. Такой подход удобен для описания товара, заметки о проекте или отзыва клиента.

VGRollup не удаляет продолжение и не загружает его заново. Весь текст уже находится на странице. Модуль ограничивает высоту области и добавляет плавное затухание у нижней границы, чтобы показать: у истории есть продолжение.

После раскрытия можно прочитать материал целиком. Повторное нажатие возвращает компактное превью. Переключите тему сайта: градиент использует общие семантические цвета и остаётся согласованным с фоном.

<div class="rollup-demo">
    <div id="rollup-text" class="rollup-demo-copy"
        data-height="120" data-lang="ru"
        data-button-more="Читать полностью" data-button-less="Свернуть текст"
        data-button-classes="btn btn-surface btn-sm"
        style="--vg-rollup-fade-height: 48px">
        <p>Хорошее описание помогает человеку быстро понять главное. В карточке достаточно короткого превью: оно знакомит с темой, а подробности остаются доступны по кнопке. Такой подход удобен для описания товара, заметки о проекте или отзыва клиента.</p>
        <p>VGRollup не удаляет продолжение и не загружает его заново. Весь текст уже находится на странице. Модуль ограничивает высоту области и добавляет плавное затухание у нижней границы, чтобы показать: у истории есть продолжение.</p>
        <p>После раскрытия можно прочитать материал целиком. Повторное нажатие возвращает компактное превью. Переключите тему сайта: градиент использует общие семантические цвета и остаётся согласованным с фоном.</p>
    </div>
</div>

/**
 * Описание: превью текста VGRollup с настройками из data-атрибутов.
 * Возможности: явная инициализация, ограничение высоты и автоматическая кнопка Data API.
 */
import { VGRollup } from 'vgapp';

function initRollupDemo() {
    const root = document.querySelector('#rollup-text');
    if (!root || VGRollup.getInstance(root)) return;
    // Сам по себе маркер data-vgrollup не запускает модуль: нужен init.
    VGRollup.init(root);
}

initRollupDemo();

/* Композиция примеров; обрезкой и видимостью управляет VGRollup. */
.rollup-demo { min-width: 0; }
.rollup-demo-copy { line-height: 28px; }
.rollup-demo-copy p { margin: 0 0 1rem; }
.rollup-demo-copy p:last-child { margin-bottom: 0; }
.rollup-demo-list { margin: 0; padding-left: 1.5rem; }
.rollup-demo-item { padding: .5rem 0; }
.rollup-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.rollup-demo-result {
    display: block;
    margin: 1.5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--vg-border-default);
    border-radius: .5rem;
    background: var(--vg-background-secondary);
    color: var(--vg-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.rollup-demo-log { max-height: 16rem; overflow-y: auto; }
.rollup-demo-empty { margin-top: 1.5rem; color: var(--vg-text-secondary); }

Три строки с многоточием

Ручная конфигурация ellipsis.line: 3 без градиента. Высота 84 px соответствует трём строкам по 28 px. Раскройте текст и сверните снова.

Короткий анонс нужен там, где важен единый ритм карточек. Ограничение по строкам оставляет одинаковую высоту превью, даже если полные описания отличаются по длине. Здесь видны только три строки, а многоточие подсказывает, что текст продолжается. После раскрытия ограничение снимается. Этот пример инициализирован через JavaScript: число строк, высота, отключение градиента и тексты управляющей кнопки переданы в параметрах. На узком экране строк становится больше, но превью по-прежнему занимает три строки. Сверните описание повторно, чтобы проверить восстановление ограничения.

<div class="rollup-demo">
    <div id="rollup-lines" class="rollup-demo-copy">Короткий анонс нужен там, где важен единый ритм карточек. Ограничение по строкам оставляет одинаковую высоту превью, даже если полные описания отличаются по длине. Здесь видны только три строки, а многоточие подсказывает, что текст продолжается. После раскрытия ограничение снимается. Этот пример инициализирован через JavaScript: число строк, высота, отключение градиента и тексты управляющей кнопки переданы в параметрах. На узком экране строк становится больше, но превью по-прежнему занимает три строки. Сверните описание повторно, чтобы проверить восстановление ограничения.</div>
</div>

/**
 * Описание: трёхстрочное превью VGRollup с многоточием.
 * Возможности: ручные параметры, ограничение строк и отключение градиента.
 */
import { VGRollup } from 'vgapp';

function initRollupDemo() {
    const root = document.querySelector('#rollup-lines');
    if (!root || VGRollup.getInstance(root)) return;
    VGRollup.init(root, {
        height: 84, // Три строки по 28 px из CSS примера.
        ellipsis: { line: 3 },
        fade: false,
        button: { more: 'Раскрыть анонс', less: 'Свернуть анонс', classes: 'btn btn-surface btn-sm' }
    });
}

initRollupDemo();

/* Композиция примеров; обрезкой и видимостью управляет VGRollup. */
.rollup-demo { min-width: 0; }
.rollup-demo-copy { line-height: 28px; }
.rollup-demo-copy p { margin: 0 0 1rem; }
.rollup-demo-copy p:last-child { margin-bottom: 0; }
.rollup-demo-list { margin: 0; padding-left: 1.5rem; }
.rollup-demo-item { padding: .5rem 0; }
.rollup-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.rollup-demo-result {
    display: block;
    margin: 1.5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--vg-border-default);
    border-radius: .5rem;
    background: var(--vg-background-secondary);
    color: var(--vg-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.rollup-demo-log { max-height: 16rem; overflow-y: auto; }
.rollup-demo-empty { margin-top: 1.5rem; color: var(--vg-text-secondary); }

Список: первые три из семи

Остальные четыре пункта скрыты, но остаются в DOM. Счётчик на кнопке показывает их количество. elements принимает имя класса без точки.

Исследование задачи и сценариев пользователя
Прототип и структура интерфейса
Дизайн ключевых экранов
Разработка компонентов
Интеграция с сервером
Проверка доступности и адаптивности
Подготовка к запуску

<div class="rollup-demo">
    <ul id="rollup-elements" class="rollup-demo-list"
        data-content="elements" data-elements="rollup-demo-item"
        data-cnt="3" data-number="true" data-fade="false" data-lang="ru"
        data-button-classes="btn btn-surface btn-sm">
        <li class="rollup-demo-item">Исследование задачи и сценариев пользователя</li>
        <li class="rollup-demo-item">Прототип и структура интерфейса</li>
        <li class="rollup-demo-item">Дизайн ключевых экранов</li>
        <li class="rollup-demo-item">Разработка компонентов</li>
        <li class="rollup-demo-item">Интеграция с сервером</li>
        <li class="rollup-demo-item">Проверка доступности и адаптивности</li>
        <li class="rollup-demo-item">Подготовка к запуску</li>
    </ul>
</div>

/**
 * Описание: список VGRollup с количеством скрытых пунктов.
 * Возможности: параметры из HTML, локализация и переключение первых трёх элементов на весь список.
 */
import { VGRollup } from 'vgapp';

function initRollupDemo() {
    const root = document.querySelector('#rollup-elements');
    if (!root || VGRollup.getInstance(root)) return;
    VGRollup.init(root);
}

initRollupDemo();

/* Композиция примеров; обрезкой и видимостью управляет VGRollup. */
.rollup-demo { min-width: 0; }
.rollup-demo-copy { line-height: 28px; }
.rollup-demo-copy p { margin: 0 0 1rem; }
.rollup-demo-copy p:last-child { margin-bottom: 0; }
.rollup-demo-list { margin: 0; padding-left: 1.5rem; }
.rollup-demo-item { padding: .5rem 0; }
.rollup-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.rollup-demo-result {
    display: block;
    margin: 1.5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--vg-border-default);
    border-radius: .5rem;
    background: var(--vg-background-secondary);
    color: var(--vg-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.rollup-demo-log { max-height: 16rem; overflow-y: auto; }
.rollup-demo-empty { margin-top: 1.5rem; color: var(--vg-text-secondary); }

Когда сворачивать нечего

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

Короткая заметка целиком помещается в превью.

Список пока пуст — скрывать нечего.

<div class="rollup-demo">
    <div id="rollup-short" class="rollup-demo-copy">Короткая заметка целиком помещается в превью.</div>
    <p id="rollup-empty-label" class="rollup-demo-empty">Список пока пуст — скрывать нечего.</p>
    <ul id="rollup-empty" class="rollup-demo-list" aria-labelledby="rollup-empty-label"></ul>
    <output id="rollup-short-result" class="rollup-demo-result" aria-live="polite"></output>
</div>

/**
 * Описание: VGRollup без лишних кнопок для короткого и пустого содержимого.
 * Возможности: инициализация текста и пустого списка с подтверждением готовности.
 */
import { VGRollup } from 'vgapp';

function initRollupDemo() {
    const root = document.querySelector('#rollup-short');
    if (!root || VGRollup.getInstance(root)) return;
    VGRollup.init(root, { height: 160 });
    VGRollup.init(document.querySelector('#rollup-empty'), {
        content: 'elements', elements: 'rollup-demo-item', cnt: 3, fade: false
    });
    document.querySelector('#rollup-short-result').textContent = 'Обе области инициализированы. Кнопки не нужны.';
}

initRollupDemo();

/* Композиция примеров; обрезкой и видимостью управляет VGRollup. */
.rollup-demo { min-width: 0; }
.rollup-demo-copy { line-height: 28px; }
.rollup-demo-copy p { margin: 0 0 1rem; }
.rollup-demo-copy p:last-child { margin-bottom: 0; }
.rollup-demo-list { margin: 0; padding-left: 1.5rem; }
.rollup-demo-item { padding: .5rem 0; }
.rollup-demo-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.rollup-demo-result {
    display: block;
    margin: 1.5rem 0 0;
    padding: .75rem;
    border: 1px solid var(--vg-border-default);
    border-radius: .5rem;
    background: var(--vg-background-secondary);
    color: var(--vg-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.rollup-demo-log { max-height: 16rem; overflow-y: auto; }
.rollup-demo-empty { margin-top: 1.5rem; color: var(--vg-text-secondary); }

Параметры и оформление

content / height: text (по умолчанию) ограничивает высоту в пикселях. height: 0 берёт половину текущей высоты; для предсказуемого превью задавайте явный лимит.
content: 'elements' / elements / cnt: elements — имя класса дочерних элементов без точки, cnt — количество видимых. number: true добавляет число скрытых элементов к кнопке; more задаёт разделитель перед числом.
fade / ellipsis.line: fade: true добавляет градиент. ellipsis.line ограничивает число строк; согласуйте height с межстрочным интервалом. Для многоточия обычно удобно отключить fade.
button: enabled включает автоматическую кнопку; more и less задают тексты, classes — классы оформления. В примерах переиспользованы btn btn-surface btn-sm из OKAUX 1.0.2.
lang / data-lang: Локализация ru или en, по умолчанию язык документа. data-lang имеет приоритет над lang; явные button.more и button.less заменяют переводы.
--vg-rollup-fade-height / --vg-rollup-fade-background: Высота и фон градиента. В примере текста высота затухания — 48 px. Общая тема остаётся в OKAUX, адаптер vgapp/theme использует тот же data-theme.
Подключение стилей: Публичный SCSS-вход vgapp/rollup или общий vgapp/scss. transition пока не обеспечивает анимацию высоты; примеры не обещают плавный переход.