Модуль панели для слабовидящих

Использование

import { ViPanel } from "@delement/vi-panel";

new ViPanel({
  // config
});

После вызова класса панель будет встраиваться в DOM-дерево, по умолчанию рендер происходит в document.body, если не передан параметр renderTo (пример ниже).
Также вместе с панелью в head будет добавлен блок стилей через тег style (панель использует CSS-модули) и шрифт Брайля.

Внешний вид открытой панели

Панель со скрытым блоком дополнительных настроек

Панель с открытым блоком дополнительных настроек

Открытие панели

Панель открывается по клику на кнопку с атрибутом data-js-vipanel-toggle, пример разметки:

<button data-js-vipanel-toggle="">Версия для слабовидящих</button>

Таких кнопок на странице может быть несколько. Повторное нажатие на кнопку закрывает панель.

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

Панель можно вызвать в компоненте следующим образом:

import { ViPanel } from "@delement/vi-panel";
import { useRef } from "react";

export const MyComponent = () => {
  const ref = useRef(null);
  
  useEffect(() => {
    new ViPanel({ renderTo: ref.current })
  }, [])
  
  return <div ref={ref}>
    <button data-js-vipanel-toggle="">Версия для слабовидящих</button>
  </div>
}

Разметка панели будет встроена на страницу в через renderTo.insertAdjacentHTML("afterbegin", "panelTemplate");.

Описание возможностей модуля

С возможностями модуля можно ознакомиться в корпоративном сторибуке на ui.d-element.ru