Dialog
Модальное окно с заметными анимациями открытия и закрытия, focus trap и восстановлением фокуса.
Базовый диалог
Масштабирование
В примере включён orceMotion, поэтому эффект виден даже при системном prefers-reduced-motion. В приложении используйте его только когда это действительно нужно.
Своя анимация
Передайте transitionName, чтобы использовать стандартные CSS-классы Vue Transition.
vue
<UiDialog v-model="opened" transition-name="product-dialog">
Содержимое
</UiDialog>
<style>
.product-dialog-enter-active,
.product-dialog-leave-active {
transition: opacity 240ms ease;
}
.product-dialog-enter-from,
.product-dialog-leave-to {
opacity: 0;
}
.product-dialog-enter-active .cui-dialog,
.product-dialog-leave-active .cui-dialog {
transition: transform 240ms ease;
}
.product-dialog-enter-from .cui-dialog,
.product-dialog-leave-to .cui-dialog {
transform: translateY(24px);
}
</style>Props
| Prop | Тип | Default | Обязательный |
|---|---|---|---|
modelValue | boolean | false | Нет |
title | string | — | Нет |
description | string | — | Нет |
size | UiDialogSize | 'md' | Нет |
animation | UiDialogAnimation | — | Нет |
transitionName | string | — | Нет |
forceMotion | boolean | — | Нет |
closeOnEscape | boolean | true | Нет |
closeOnBackdrop | boolean | true | Нет |
showClose | boolean | true | Нет |
teleport | boolean | true | Нет |
closeLabel | string | — | Нет |
События: update:modelValue, close(reason).
Слоты: title, default, footer.