Romych в 08:59, 22 жовтня 2021

2021-10-22T08:59:26Z

Нова сторінка

== Modal / Модальное окно ==

Примеры:

* https://tailwindui.com/components/application-ui/overlays/modals
* https://www.vue-tailwind.com/docs/modal
* https://material-tailwind.com/documentation/react/modals
* https://www.tailwind-kit.com/components/alert#

Также полезно встраивать [https://github.com/phegman/v-scroll-lock v-scroll-lock].

Примерная конструкция модального окна:

<source lang="html">

<template>
<div class="modal" v-if="open">
<button @click="closeModal">X</button>
<div class="modal-content" v-scroll-lock="open">
<p>A bunch of scrollable modal content</p>
</div>
</div>
</template>

<script>
export default {
name: 'Modal',
data() {
return {
open: false,
}
},
methods: {
openModal() {
this.open = true
},
closeModal() {
this.open = false
},
},
}
</script>

</source>

Компоненты Tailwind - Історія редагувань

Romych в 08:59, 22 жовтня 2021