Sheet
Extends the Dialog component to display content that complements the main content of the screen.
use leptos::prelude::*; use singlestage::*; #[component] pub fn SheetExample() -> impl IntoView { view! { <Sheet> <SheetTrigger> <Button variant="outline">"Open"</Button> </SheetTrigger> <SheetContent> <SheetHeader> <SheetTitle>"Edit profile"</SheetTitle> <SheetDescription> "Make changes to your profile here. Click save when you're done." </SheetDescription> </SheetHeader> <div class="grid flex-1 auto-rows-min gap-6 px-4"> <div class="grid gap-3"> <Label label_for="sheet-demo-name">"Name"</Label> <Input id="sheet-demo-name" value="Pedro Duarte" /> </div> <div class="grid gap-3"> <Label label_for="sheet-demo-username">"Username"</Label> <Input id="sheet-demo-username" value="@peduarte" /> </div> </div> <SheetFooter> <Button>"Save changes"</Button> <SheetClose> <Button variant="outline">"Close"</Button> </SheetClose> </SheetFooter> </SheetContent> </Sheet> } }
Side
Use the side prop to set which edge of the screen the sheet will appear from.
use leptos::prelude::*; use singlestage::*; #[component] pub fn SheetSideExample() -> impl IntoView { let sheet_sides: [&'static str; 4] = ["top", "right", "bottom", "left"]; view! { <div class="flex flex-wrap gap-2"> <For each=move || sheet_sides.to_owned() key=|side| side.to_string() let(side)> <Sheet> <SheetTrigger> <Button variant="outline" class="capitalize"> {side} </Button> </SheetTrigger> <SheetContent side class=match side { "top" | "bottom" => "max-h-[50vh]", _ => "", } > <SheetHeader> <SheetTitle>"Edit profile"</SheetTitle> <SheetDescription> "Make changes to your profile here. Click save when you're done." </SheetDescription> </SheetHeader> <div class="no-scrollbar overflow-y-auto px-4"> <For each=move || 0..10 key=|i| i.to_string() let(_)> <p class="mb-2 leading-relaxed"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> </For> </div> <SheetFooter> <Button>"Save changes"</Button> <SheetClose> <Button variant="outline">"Cancel"</Button> </SheetClose> </SheetFooter> </SheetContent> </Sheet> </For> </div> } }
No Close Button
Use the show_close_button prop to control displaying a close button.
use leptos::prelude::*; use singlestage::*; #[component] pub fn SheetNoCloseButtonExample() -> impl IntoView { view! { <Sheet> <SheetTrigger> <Button variant="outline">"Open Sheet"</Button> </SheetTrigger> <SheetContent show_close_button=false> <SheetHeader> <SheetTitle>"No Close Button"</SheetTitle> <SheetDescription> "This sheet doesn't have a close button in the top-right corner. Click outside to close." </SheetDescription> </SheetHeader> </SheetContent> </Sheet> } }
Anatomy
Import all parts and piece them together.
use leptos::prelude::*; use singlestage::*; #[component] pub fn SheetAnatomy() -> impl IntoView { view! { <Sheet> <SheetTrigger> <Button /> </SheetTrigger> <SheetContent> <SheetHeader> <SheetTitle /> <SheetDescription /> </SheetHeader> <SheetFooter> <SheetClose> <Button /> </SheetClose> </SheetFooter> </SheetContent> </Sheet> } }
API Reference
Sheet
Contains all the components of a sheet.
SheetClose
Wraps a button to be used to trigger closing the sheet.
SheetDescription
A description of sheet content that renders in the sheet header.
Implements global attributes.
SheetFooter
A component that renders at the bottom of the sheet and typically contains calls to action.
Implements global attributes.
SheetHeader
A header group that contains a title and description and renders at the top of the sheet.
Implements global attributes.
SheetTrigger
Wraps a button to be used to trigger opening the sheet.