Вступление #

Для работы боковой панели можно использовать класс по умолчанию .js-slideout-trigger и атрибут data-slideout-id с указанием id панели.

Установка #

Пример разметки и инициализации бокового меню.

    <button
		class="js-slideout-trigger"
		type="button"
		data-slideout-id="slideout-panel"
	>
		Показать боковую панель
	</button>

    <div id="slideout-panel">
        <p>Пример боковой панели</p>
    </div>

    BasicSlideout.init({
		trigger: '.my-slideout-trigger',
		panel: '.my-slideout-panel'
	});

    // или

    BasicSlideout.init(); // по умолчанию инициaлизирует триггер с классом .js-slideout-trigger и с дата-атрибутом data-slideout-id.

Методы #

show() #

Показывает боковое меню.

    // принимает значение типа Object или String
    BasicSlideout.show('.my-slideout-panel');

hide() #

Скрывает боковое меню.

    // принимает значение типа Object или String
    BasicSlideout.hide('.my-slideout-panel');

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

	const mySlideoutPanel = document.getElementById('my-slideout-panel');

	console.log(mySlideoutPanel.BasicSlideout); // пример экземпляра

Прослушивание событий #

Можно прослушать события элемента и получить нужные параметры.

slideout:change #

Срабатывает при переключении видимости боковой панели.

Параметры:

	const mySlideoutPanel = document.getElementById('my-slideout-panel');

	mySlideoutPanel.addEventListener('slideout:change', function(event) {

        console.log(event.detail); // параметры

    }, false);