Drawer

Стандартный HTML-тег <dialog> в роли бокового меню.

<button class="cb-button-board" id="mydrawer">Боковое меню</button>
<cb-drawer data-button="mydrawer">
    <dialog class="cb-drawer">
          Контент 
         <button class="cb-button cb-round" data-close>
            <svg class="cb-icon"><use href="#cb-svg-drawer"></use></svg>
         </button>
    </dialog>
</cb-drawer>

Атрибуты

path

Адреса страниц, для которых работает элемент по правилам:

адреса, разделённые пробелом path="/docs/dialog /docs/drawer"
path="/*" на всех страницах
path="/docs*" страница с адресом /docs и всех внутренних (docs/dialog, /docs/drawer)
path="/docs>" на всех внутренних (/docs/dialog, /docs/drawer)

data-close

Добавляет любому элементу диалога поведение кнопки "закрыть"

swipe-disabled

Индикатор активности

JavaScript

const drawer = document.querySelector('cb-drawer')
drawer.button = myButton

Привязывает кнопку, которая открывает диалог

События

open

Срабатывает, когда элементу dialog добавлен атрибут open

drawer.addEventListener('open', callback)

Инструменты разработчика

HTML

CSS

Бэкенд

Бэкенд

HTML

JavaScript

Компоненты

JavaScript

Бэкенд

Drawer

Атрибуты

JavaScript

События