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

Подключение

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>

Параметры

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

Параметр StepType

Параметр HeaderType

Параметр StackType

Параметр ImageType

Параметр FooterType

Класс ImageStackSteps

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

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

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

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

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 в шагах, заголовках и футерах.