Стек изображений с шагами

Расширение ui.image-stack-steps отображает и управляет стеками изображений с шагами. Каждый шаг включает заголовок, стек изображений и футер. Можно динамически добавлять, обновлять и удалять шаги.

Подключение

JS (ES6)

import { ImageStackSteps } from 'ui.image-stack-steps';

const options = {
    steps: [
        {
            id: 'step1',
            header: { type: 'text', data: { text: 'Заголовок шага 1' } },
            stack: {
                images: [
                    { type: 'image', data: { src: 'image1.jpg', title: 'Изображение 1' } }
                ],
                status: { type: 'ok' }
            },
            footer: { type: 'text', data: { text: 'Футер шага 1' } }
        }
    ]
};

const imageStack = new ImageStackSteps(options);
imageStack.renderTo(document.getElementById('container'));

JS (ES5)

var ImageStackSteps = require('ui.image-stack-steps').ImageStackSteps;

var options = {
    steps: [
        {
            id: 'step1',
            header: { type: 'text', data: { text: 'Заголовок шага 1' } },
            stack: {
                images: [
                    { type: 'image', data: { src: 'image1.jpg', title: 'Изображение 1' } }
                ],
                status: { type: 'ok' }
            },
            footer: { type: 'text', data: { text: 'Футер шага 1' } }
        }
    ]
};

var imageStack = new ImageStackSteps(options);
imageStack.renderTo(document.getElementById('container'));

PHP

<php
use Bitrix\Main\Loader;
use Bitrix\Main\UI\Extension;

Loader::includeModule('ui');

Extension::load('ui.image-stack-steps');

?>
<div id="container"><div>
<script>
    BX.ready(function() {
        var options = {
            steps: [
                {
                    id: 'step1',
                    header: { type: 'text', data: { text: 'Заголовок шага 1' } },
                    stack: {
                        images: [
                            { type: 'image', data: { src: 'image1.jpg', title: 'Изображение 1' } }
                        ],
                        status: { type: 'ok' }
                    },
                    footer: { type: 'text', data: { text: 'Футер шага 1' } }
                }
            ]
        };

        var imageStack = new BX.UI.ImageStackSteps(options);
        imageStack.renderTo(document.getElementById('container'));
    });
</script>

Параметры

Основные параметры

Параметр `тип`	Описание	Обяз.
steps `Array<StepType>`	Массив шагов, которые будут отображаться в компоненте	Да

Параметр StepType

Параметр `тип`	Описание	Обяз.
id `String`	Уникальный идентификатор шага	Да
progressBox `Object`	Объект, описывающий прогресс-бокс и содержащий заголовок	Нет
header `HeaderType`	Заголовок шага, определяемый типом и данными	Да
stack `StackType`	Стек изображений, содержащий изображения и их статус	Да
footer `FooterType`	Футер шага, определяемый типом и данными	Да
styles `Object`	Стили для шага. Например, минимальная ширина	Нет

Параметр HeaderType

Параметр `тип`	Описание	Обяз.
type `String`	Тип заголовка	Да
data `Object`	Данные заголовка	Да
styles `Object`	Стили заголовка	Нет

Параметр StackType

Параметр `тип`	Описание	Обяз.
images `Array<ImageType>`	Массив изображений	Да
status `StackStatusType`	Статус стека	Нет

Параметр ImageType

Параметр `тип`	Описание	Обяз.
type `String`	Тип изображения	Да
data `Object`	Данные изображения	Да

Параметр FooterType

Параметр `тип`	Описание	Обяз.
type `String`	Тип футера	Да
data `Object`	Данные футера	Да
styles `Object`	Стили футера	Нет

Класс ImageStackSteps

Класс ImageStackSteps предоставляет методы для управления стеками изображений и шагами. Методы позволяют динамически изменять шаги в компоненте.

Методы класса

Метод	Описание	Параметры	Возвращаемое значение
`renderTo(node: HTMLElement)`	Рендерит компонент в указанный DOM-элемент	`node` — DOM-элемент, в который будет отрисован компонент	—
`getSteps(): Array<StepType>`	Возвращает массив текущих шагов. Каждый шаг возвращается как копия, чтобы избежать изменений исходных данных	—	Массив объектов `StepType`
`addStep(stepData: StepType): boolean`	Добавляет новый шаг в стек. Если данные шага некорректны, шаг не будет добавлен	`stepData` — данные нового шага	`true`, если шаг успешно добавлен, иначе `false`
`updateStep(stepData: StepType, stepId: string): boolean`	Обновляет данные шага с указанным `stepId`. Если данные некорректны, шаг не будет обновлен	`stepData` — новые данные шага. `stepId` — идентификатор шага, который нужно обновить	`true`, если шаг успешно обновлен, иначе `false`
`deleteStep(stepId: string): boolean`	Удаляет шаг с указанным `stepId`	`stepId` — идентификатор шага, который нужно удалить	`true`, если шаг успешно удален, иначе `false`
`destroy()`	Уничтожает компонент, освобождая ресурсы и отключая его от DOM	—	—

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

Простой стек с одним шагом

const options = {
    steps: [
        {
            id: 'step1',
            header: { type: 'text', data: { text: 'Заголовок шага 1' } },
            stack: {
                images: [
                    { type: 'image', data: { src: 'image1.jpg', title: 'Изображение 1' } }
                ],
                status: { type: 'ok' }
            },
            footer: { type: 'text', data: { text: 'Футер шага 1' } }
        }
    ]
};

const imageStack = new ImageStackSteps(options);
imageStack.renderTo(document.getElementById('container'));

Как добавить шаг динамически

const newStep = {
    id: 'step2',
    header: { type: 'text', data: { text: 'Заголовок шага 2' } },
    stack: {
        images: [
            { type: 'image', data: { src: 'image2.jpg', title: 'Изображение 2' } }
        ],
        status: { type: 'wait' }
    },
    footer: { type: 'text', data: { text: 'Футер шага 2' } }
};

imageStack.addStep(newStep);

Дополнительная информация

Расширение использует EventEmitter для уведомлений об изменениях. Например, можно подписаться на событие UI.ImageStackSteps.onUpdateSteps, чтобы отслеживать обновления шагов.
Для работы с расширением требуется подключение библиотек main.core, main.core.events и ui.vue3.
Расширение поддерживает различные типы изображений, включая пользовательские аватары, иконки и счетчики.
Для кастомизации внешнего вида можно использовать параметры styles в шагах, заголовках и футерах.

Пользовательские комментарии

Помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

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

Наверх