You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
3.3 KiB
HTML
88 lines
3.3 KiB
HTML
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
|
<button
|
|
command="show-modal"
|
|
commandfor="drawer"
|
|
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
|
>
|
|
Open drawer
|
|
</button>
|
|
<el-dialog>
|
|
<dialog
|
|
id="drawer"
|
|
aria-labelledby="drawer-title"
|
|
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
|
>
|
|
<div
|
|
tabindex="0"
|
|
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
|
>
|
|
<el-dialog-panel
|
|
class="ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
|
>
|
|
<div
|
|
class="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl"
|
|
>
|
|
<div class="flex min-h-0 flex-1 flex-col overflow-y-auto py-6">
|
|
<div class="px-4 sm:px-6">
|
|
<div class="flex items-start justify-between">
|
|
<h2
|
|
id="drawer-title"
|
|
class="text-base font-semibold text-gray-900"
|
|
>
|
|
Panel title
|
|
</h2>
|
|
<div class="ml-3 flex h-7 items-center">
|
|
<button
|
|
type="button"
|
|
command="close"
|
|
commandfor="drawer"
|
|
class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-hidden"
|
|
>
|
|
<span class="absolute -inset-2.5"></span>
|
|
<span class="sr-only">Close panel</span>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6"
|
|
>
|
|
<path
|
|
d="M6 18 18 6M6 6l12 12"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative mt-6 flex-1 px-4 sm:px-6">
|
|
<!-- Your content -->
|
|
</div>
|
|
</div>
|
|
<div class="flex shrink-0 justify-end px-4 py-4">
|
|
<button
|
|
type="button"
|
|
command="close"
|
|
commandfor="drawer"
|
|
class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:ring-gray-400"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="ml-4 inline-flex justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</el-dialog-panel>
|
|
</div>
|
|
</dialog>
|
|
</el-dialog>
|