SwGade

Компонент SwGide
Создает затенение вокруг блока
по заданному тегу.

SwGide

Компонент SwGide Создает затенение вокруг блока по заданному тегу, и выводит SwDropdown с управляющими кнопками, переключающими по массиву из параметров steps

Свойства / Properties

Имя	Тип	По умолчанию	Значения/Описание
`steps`	`Array`	`() => []`	Массив шагов обучения. [{header: 'заголовок',text: 'текст сообщения',tag: 'тег,якорь или класс', placement: 'место всплытия', img: 'src картинки' }],
`iconClose`	`String`	``	Иконка закрытия обучения.
`maxWidth`	`Number`	`250`	Ширина всплывающего окна в px (без картинки). по умолчанию 250

Слоты / Slots

#header - заголовок окна Default - текст сообщения с картинкой #arrow - слот для стрелок

Модель / Model

model - массив обьектов шагов обучения

Пример использования / Example Usage

<script>
    let step = 0;
    let steps = [
        {header: 'заголовок',
         text: 'текст сообщения',
         tag: 'nav', 
         placement: 'bottom',
         img: '/img/img.npg' 
        }
    ]
</script>
<sw-gide v-if="settings.gide" :steps="steps" v-model="step" @close="settings.gide=false" icon-step="arrow">
    <template #header>
        Блок {{ steps[step].header }} 
        <sw-button type="primary" link @click="settings.gide=false"><svg-icon icon-class="close" /></sw-button>
    </template>
    <template #arrow><svg-icon icon-class="arrow" /></template>
</sw-gide>