Modal 🔗

Модальное окно с полностью кастомизируемым контентом и кнопкой закрытия

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

Исходный код для примера выше:

<script>
    let modal = undefined
</script>

<Button on:click={ modal.open }>Открыть модальное окно</Button>

<Modal bind:this={ modal } align="center">
    <Heading size={2} color="var(--blue)">Модальное окно</Heading>
    <Text className="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit...</Text>
    <br />
    <Button variant="blue" on:click={ modal.close }>Закрыть</Button>
    <Rainbow size="L" slot="footer" />
</Modal>

Параметры:

closable

boolean

Можно ли закрывать открытое модальное окно или нет
Значение по умолчанию: true

align

enum

Выравнивание текста внутри компонента
Поддерживаются 5 значений: unset, initial, left, center и right
Значение по умолчанию: unset

node

HTMLElement

Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)

id

string

Аналог стандартного атрибута id

className

string

Аналог стандартного атрибута class

Методы:

open

Метод для открытия модального окна

close

Метод для закрытия модального окна

toggle

Метод для открытия/закрытия модального окна

Поддерживаемые события:

on:mouseover

on:mouseleave

on:open

on:close