Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Usage
Example
RBUI to the rescue
RBUI helps you build accessible standard compliant web apps with ease
Dialog do DialogTrigger do Button { "Open Dialog" } end DialogContent do DialogHeader do DialogTitle { "RBUI to the rescue" } DialogDescription { "RBUI helps you build accessible standard compliant web apps with ease" } end DialogMiddle do AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do img( alt: "Placeholder", loading: "lazy", src: helpers.image_path("pattern.jpg") ) end end DialogFooter do Button(variant: :outline, data: { action: 'click->rbui--dialog#dismiss' }) { "Cancel" } Button { "Save" } end end end
Copied!
Copy failed!
Size
Applicable for wider screens
RBUI to the rescue
RBUI helps you build accessible standard compliant web apps with ease
RBUI to the rescue
RBUI helps you build accessible standard compliant web apps with ease
div(class: 'flex flex-wrap justify-center gap-2') do Dialog do DialogTrigger do Button { "Small Dialog" } end DialogContent(size: :sm) do DialogHeader do DialogTitle { "RBUI to the rescue" } DialogDescription { "RBUI helps you build accessible standard compliant web apps with ease" } end DialogMiddle do AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do img( alt: "Placeholder", loading: "lazy", src: helpers.image_path("pattern.jpg") ) end end DialogFooter do Button(variant: :outline, data: { action: 'click->rbui--dialog#dismiss' }) { "Cancel" } Button { "Save" } end end end Dialog do DialogTrigger do Button { "Large Dialog" } end DialogContent(size: :lg) do DialogHeader do DialogTitle { "RBUI to the rescue" } DialogDescription { "RBUI helps you build accessible standard compliant web apps with ease" } end DialogMiddle do AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do img( alt: "Placeholder", loading: "lazy", src: helpers.image_path("pattern.jpg") ) end end DialogFooter do Button(variant: :outline, data: { action: 'click->rbui--dialog#dismiss' }) { "Cancel" } Button { "Save" } end end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
AspectRatio | Phlex | |
Button | Phlex | |
Dialog | Phlex | |
DialogContent | Phlex | |
DialogDescription | Phlex | |
DialogFooter | Phlex | |
DialogHeader | Phlex | |
DialogMiddle | Phlex | |
DialogTitle | Phlex | |
DialogTrigger | Phlex |
Component | Built using | Source |
---|---|---|
Dialog | Phlex | |
DialogContent | Phlex | |
DialogDescription | Phlex | |
DialogFooter | Phlex | |
DialogHeader | Phlex | |
DialogMiddle | Phlex | |
DialogTitle | Phlex | |
DialogTrigger | Phlex | |
DialogController | Stimulus JS |