Sheet
Side-panel overlay for supplementary content and actions.
A basic sheet component
This is an example of a basic sheet component.
<.button phx-click={Fluxon.open_dialog("my-sheet")}>Open sheet</.button>
<.sheet id="my-sheet">
<h3>Sheet title</h3>
<div class="flex justify-end gap-4 mt-6">
<.button phx-click={Fluxon.close_dialog("my-sheet")}>Cancel</.button>
<.button variant="solid" color="blue">Some action</.button>
</div>
</.sheet>
Sizes
Adjust sheet dimensions to accommodate various content types and maintain optimal readability.
A sheet with a max-width
This sheet demonstrates the use of Tailwind's max-w-xl class.
A fixed-width sheet
This sheet demonstrates a fixed width of 200px. Using fixed widths allows for consistent layouts across different screen sizes, ideal for forms, alerts, or focused content that doesn't require full-width display.
A full width sheet
This full-width modal spans the entire screen, maximizing content visibility. It's ideal for displaying large amounts of information or complex layouts.
<.button phx-click={Fluxon.open_dialog("sheet-size-max-w-xl")}>Max width</.button>
<.sheet id="sheet-size-max-w-xl" class="max-w-xl">
<p>A sheet with a max-width</p>
</.sheet>
<.button phx-click={Fluxon.open_dialog("sheet-size-200px")}>Fixed width</.button>
<.sheet id="sheet-size-200px" class="w-[200px]">
<p>A fixed-width sheet</p>
</.sheet>
<.button phx-click={Fluxon.open_dialog("sheet-size-w-full")}>Full width</.button>
<.sheet id="sheet-size-w-full" class="w-full">
<p>A full width sheet</p>
</.sheet>
Animations
Apply custom animations to sheet entry and exit transitions for a polished experience.
Custom animation
This is a sheet with a custom animation.
Custom animation
This is a sheet with a custom animation.
Slide up
This is a sheet with a slide up animation.
<.button phx-click={Fluxon.open_dialog("animation-sheet-slow")}>Slow</.button>
<.sheet
id="animation-sheet-slow"
animation_enter="translate-x-0"
animation_leave="-translate-x-full"
animation="duration-1000"
backdrop_class="duration-1000"
>
Content
</.sheet>
<.button phx-click={Fluxon.open_dialog("animation-sheet-opacity")}>Opacity</.button>
<.sheet
id="animation-sheet-opacity"
animation_enter="opacity-100"
animation_leave="opacity-0"
>
Content
</.sheet>
<.button phx-click={Fluxon.open_dialog("animation-sheet-no-animation")}>No animation</.button>
<.sheet
id="animation-sheet-no-animation"
animation="transition duration-0"
backdrop_class="duration-0"
>
Content
</.sheet>
Custom backdrop
Tailor the sheet backdrop appearance to create the desired focus and visual hierarchy.
Blue Opacity Backdrop
This sheet demonstrates a blue opacity backdrop with a slight blur effect.
Frosted Glass Effect
This sheet showcases an intense blur effect, creating a frosted glass appearance.
Full Blackout Backdrop
This sheet uses a completely black backdrop for maximum contrast and focus.
Light Dimming Effect
This sheet employs a subtle transparency, creating a light dimming effect on the background.
<.button phx-click={Fluxon.open_dialog("custom-backdrop-sheet")}>Blue Opacity</.button>
<.sheet id="custom-backdrop-sheet" backdrop_class="bg-blue-950 bg-opacity-90 backdrop-blur-sm">
Content
</.sheet>
<.button phx-click={Fluxon.open_dialog("custom-backdrop-sheet-intense-blur")}>Frosted Glass</.button>
<.sheet id="custom-backdrop-sheet-intense-blur" backdrop_class="bg-black bg-opacity-10 backdrop-blur-lg">
Content
</.sheet>
<.button phx-click={Fluxon.open_dialog("custom-backdrop-sheet-black-out")}>Full Blackout</.button>
<.sheet id="custom-backdrop-sheet-black-out" backdrop_class="bg-black">
Content
</.sheet>
<.button phx-click={Fluxon.open_dialog("custom-backdrop-sheet-subtle-transparency")}>Light Dimming</.button>
<.sheet id="custom-backdrop-sheet-subtle-transparency" backdrop_class="bg-black bg-opacity-20">
Content
</.sheet>
Placement
Position sheets to slide from different screen edges to suit various use cases and designs.
Top Sheet
This sheet slides down from the top of the screen.
Bottom Sheet
This sheet slides up from the bottom of the screen.
Left Sheet
This sheet slides in from the left side of the screen.
Right Sheet
This sheet slides in from the right side of the screen.
<.button phx-click={Fluxon.open_dialog("sheet-1")}>Top</.button>
<.sheet id="sheet-1" placement="top" class="min-h-48">
Content
</.sheet>
<.button phx-click={Fluxon.open_dialog("sheet-2")}>Bottom</.button>
<.sheet id="sheet-2" placement="bottom" class="min-h-96">
Content
</.sheet>
<.button phx-click={Fluxon.open_dialog("sheet-3")}>Left</.button>
<.sheet id="sheet-3" placement="left">
Content
</.sheet>
<.button phx-click={Fluxon.open_dialog("sheet-4")}>Right</.button>
<.sheet id="sheet-4" placement="right">
Content
</.sheet>