Sheet
Extends the Sheet component to display content that complements the main content of the screen.
Usage
Example
Edit profile
Make changes to your profile here. Click save when you're done.
Sheet do SheetTrigger do Button(variant: :outline) { "Open Sheet" } end SheetContent(class: 'sm:max-w-sm') do SheetHeader do SheetTitle { "Edit profile" } SheetDescription { "Make changes to your profile here. Click save when you're done." } end SheetMiddle do label { "Name" } Input(placeholder: "Joel Drapper") { "Joel Drapper" } label { "Email" } Input(placeholder: "joel@drapper.me") end SheetFooter do Button(variant: :outline, data: { action: 'click->rbui--sheet-content#close' }) { "Cancel" } Button(type: "submit") { "Save" } end end end
Copied!
Copy failed!
Side
Use the side property to indicate the edge of the screen where the component will appear.
Edit profile
Make changes to your profile here. Click save when you're done.
div(class: 'grid grid-cols-2 gap-4') do # -- TOP -- Sheet do SheetTrigger do Button(variant: :outline, class: 'w-full justify-center') { :top } end SheetContent(side: :top, class: tokens(-> { [:left, :right].include?(:top) } => "sm:max-w-sm")) do SheetHeader do SheetTitle { "Edit profile" } SheetDescription { "Make changes to your profile here. Click save when you're done." } end Form do SheetMiddle do label { "Name" } Input(placeholder: "Joel Drapper") { "Joel Drapper" } label { "Email" } Input(placeholder: "joel@drapper.me") end SheetFooter do Button(variant: :outline, data: { action: 'click->rbui--sheet-content#close' }) { "Cancel" } Button(type: "submit") { "Save" } end end end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Button | Phlex | |
Form | Phlex | |
Input | Phlex | |
Sheet | Phlex | |
SheetContent | Phlex | |
SheetDescription | Phlex | |
SheetFooter | Phlex | |
SheetHeader | Phlex | |
SheetMiddle | Phlex | |
SheetTitle | Phlex | |
SheetTrigger | Phlex |
Component | Built using | Source |
---|---|---|
Sheet | Phlex | |
SheetContent | Phlex | |
SheetDescription | Phlex | |
SheetFooter | Phlex | |
SheetHeader | Phlex | |
SheetMiddle | Phlex | |
SheetTitle | Phlex | |
SheetTrigger | Phlex | |
SheetContentController | Stimulus JS | |
SheetController | Stimulus JS |