Slide-over
A slide-over element that can be used to show content from the side.
+
Tailwind and Alpine
Copied!
Slide Over Title
<div x-data="{
slideOverOpen: false
}"
class="relative z-50 w-auto h-auto">
<button @click="slideOverOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
<template x-teleport="body">
<div
x-show="slideOverOpen"
@keydown.window.escape="slideOverOpen=false"
class="relative z-[99]">
<div x-show="slideOverOpen" x-transition.opacity.duration.600ms @click="slideOverOpen = false" class="fixed inset-0 bg-black bg-opacity-10"></div>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
<div
x-show="slideOverOpen"
@click.away="slideOverOpen = false"
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
class="w-screen max-w-md">
<div class="flex flex-col h-full py-5 overflow-y-scroll bg-white border-l shadow-lg border-neutral-100/70">
<div class="px-4 sm:px-5">
<div class="flex items-start justify-between pb-1">
<h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">Slide Over Title</h2>
<div class="flex items-center h-auto ml-3">
<button @click="slideOverOpen=false" class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-5 space-x-1 text-xs font-medium uppercase border rounded-md border-neutral-200 text-neutral-600 hover:bg-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
<span>Close</span>
</button>
</div>
</div>
</div>
<div class="relative flex-1 px-4 mt-5 sm:px-5">
<div class="absolute inset-0 px-4 sm:px-5">
<div class="relative h-full overflow-hidden border border-dashed rounded-md border-neutral-300"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
Data
Below you will find the data properties available in the x-data attribute of this element.
| Property and Description | Description |
|---|---|
| slideOverOpen | A boolean value that will open or close the slide-over |
| A boolean value that will open or close the slide-over |
More Examples
Below you will find more Slide-over examples you may wish to use in your projects.
Copied!
Full-screen Slide Over Title
<div x-data="{
slideOverOpen: false
}"
class="relative z-50 w-auto h-auto">
<button @click="slideOverOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
<template x-teleport="body">
<div
x-show="slideOverOpen"
@keydown.window.escape="slideOverOpen=false"
class="relative z-[99]">
<div x-show="slideOverOpen" x-transition.opacity.duration.600ms @click="slideOverOpen = false" class="fixed inset-0 bg-black bg-opacity-10"></div>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
<div
x-show="slideOverOpen"
@click.away="slideOverOpen = false"
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
class="w-screen max-w-full">
<div class="flex flex-col h-full py-5 overflow-y-scroll bg-white border-l shadow-lg border-neutral-100/70">
<div class="px-4 sm:px-5">
<div class="flex items-start justify-between pb-1">
<h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">Full-screen Slide Over Title</h2>
<div class="flex items-center h-auto ml-3">
<button @click="slideOverOpen=false" class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-5 space-x-1 text-xs font-medium uppercase border rounded-md border-neutral-200 text-neutral-600 hover:bg-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
<span>Close</span>
</button>
</div>
</div>
</div>
<div class="relative flex-1 px-4 mt-5 sm:px-5">
<div class="absolute inset-0 px-4 sm:px-5">
<div class="relative h-full overflow-hidden border border-dashed rounded-md border-neutral-300"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
