ru-dialog-close-button
v1.0.0
Published
Vanilla Web Component кнопка для закрытия диалоговых окон
Maintainers
kresslibReadme
dialog-close-button
Vanilla Web Component кнопка для закрытия диалоговых окон.
Установка
npm install dialog-close-buttonИспользование
Подключение
import 'dialog-close-button'или через CDN:
<script type="module" src="https://unpkg.com/dialog-close-button/dist/dialog-close-button.js"></script>Базовое использование
<dialog id="my-dialog">
<dialog-close-button></dialog-close-button>
<p>Содержимое диалога</p>
</dialog>С указанием целевого диалога
<dialog id="my-dialog">
<p>Содержимое диалога</p>
</dialog>
<button data-dialog="my-dialog">Открыть</button>
<dialog-close-button dialog-target="#my-dialog"></dialog-close-button>Атрибуты
| Атрибут | Описание |
|---------|----------|
| dialog-target | CSS-селектор целевого диалога (например, #my-dialog или [role="dialog"]) |
События
| Событие | Описание |
|---------|----------|
| dialog-closed | Срабатывает после закрытия диалога. В detail передаётся объект с ссылкой на закрытый диалог |
document.addEventListener('dialog-closed', (event) => {
console.log('Диалог закрыт:', event.detail.dialog)
})Стилизация
Компонент использует Shadow DOM. Для кастомизации используйте CSS-переменные или переопределите стили через атрибут part (в будущих версиях).
Пример с нативным <dialog>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog Close Button Demo</title>
<script type="module">
import 'dialog-close-button'
</script>
</head>
<body>
<button id="open-btn">Открыть диалог</button>
<dialog id="my-dialog">
<dialog-close-button></dialog-close-button>
<h2>Заголовок диалога</h2>
<p>Это пример диалогового окна с кнопкой закрытия.</p>
</dialog>
<script>
const dialog = document.getElementById('my-dialog')
const openBtn = document.getElementById('open-btn')
openBtn.addEventListener('click', () => {
dialog.showModal()
})
</script>
</body>
</html>Лицензия
MIT