Сегодня мы будем делать многоразовый модальный компонент в Astro.
Идея состоит в том, чтобы иметь один компонент, который следует за семантикой HTML и может вызвать модальное всплывающее окно.
Содержание этого всплывающего окна может быть всем, что мы хотим, и мы хотим динамически использовать этот компонент.
Конечный результат будет выглядеть так:
Создание компонента
Убедитесь, что у вас есть настройка проекта Astro. Если у вас еще нет, пожалуйста, проверьте мой Astro Starter Project Анкет
Мы хотим добавить новый компонент под названием Modal.astro Внутри нашего Компоненты папка.
Компонент должен получать два свойства: идентификатор этого модала и текст для кнопки «Открыть».
---
const {id, open} = Astro.props;
---
Эти три точки известны как Frontmatter и может быть использован, чтобы включить JavaScript в ваши компоненты Astro.
Тогда мы хотим отобразить кнопку, которая может открыть модальный.
Что мы делаем здесь, так это привязанность к этому кнопку, привязанную к этой кнопке. Там мы передаем уникальный идентификатор для этого модала. Затем мы установили открытую переменную в кнопке. Это текст на кнопке.
Функция Window Showmodal – это нативная функция браузера для вызова диалогов. Используя этот путь, мы получаем опцию на фоне, что облегчает стиль этого модала.
Следующее, что мы хотим, – это фактический элемент диалога.
Как вы можете видеть, мы передаем идентификатор в качестве уникального идентификатора для этого элемента диалога. С помощью этого идентификатора мы можем открыть его, как мы видели в кнопке выше.
Затем мы передаем слот для основного контента. (Подробнее о слотах немного) И мы добавляем форму с близким слотом. Это необходимо, потому что собственный диалог закроется, когда нажата кнопка внутри этой формы диалога. (The method = "Dialog" – это ключ здесь).
Последнее, что мы хотим добавить под нашу переднюю часть, – это какой -то основной стиль.
Это добавит некоторый базовый стиль, чтобы сосредоточить наш диалог на странице и окрасить фон.
Использование Astro Modal Component
Теперь мы хотим использовать этот модальный компонент. Посмотрим, как это работает. Откройте Страницы/index.astro Подайте и импортируйте компонент в вашу часть передней части.
-------- // Component Imports import Modal from '../components/Modal.astro'; --------
Чтобы использовать его, вы можете ввести Html как это:
Some extra content you would like here
Довольно круто!
Посмотрим, что происходит немного больше. Мы открываем Модальный составная часть. Это требует двух параметров, являющихся Id и Open кнопка текст.
Затем мы вставляем основной элемент с слот ключ. Помните слоты, о которых мы говорили? Этот элемент будет отображаться внутри Главный слот
А потом мы добавляем кнопку, которая отражает Закрыть Слот!
Вот и все! Теперь у нас есть многоразовый компонент, который прост в использовании!
Вы можете найти полный код на GitHub Анкет
Спасибо за чтение, и давайте подключимся!
Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку электронной почты и подключиться на Facebook или Твиттер
Оригинал: “https://dev.to/dailydevtips1/reusable-modal-component-in-astro-35dn”