arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 07:21:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Slideover): add top / bottom sides

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-18 21:36:05 +01:00
parent da9ea7ac17
commit 3e8a99244e
5 changed files with 142 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/runtime/components/Slideover.vue
View File

@@ -16,7 +16,7 @@ export interface SlideoverProps extends DialogRootProps {
content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
overlay?: boolean
transition?: boolean
side?: 'left' | 'right'
side?: 'left' | 'right' | 'top' | 'bottom'
preventClose?: boolean
portal?: boolean
close?: ButtonProps | null
@@ -173,4 +173,36 @@ const ui = computed(() => tv({ extend: slideover, slots: props.ui })({
transform: translateX(-100%);
}
}
@keyframes slideover-content-top-open {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideover-content-top-closed {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
@keyframes slideover-content-bottom-open {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slideover-content-bottom-closed {
from {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
</style>