RUI::Slideout

The RUI::Slideout component is a container that slides out from the right side of the screen. It is useful for displaying additional content without navigating away from the current page.

Example

Try me!

Usage

Follow these steps to create a slideout in your RelayUi application:

Include the turbo frame in your view:

turbo_frame_tag "slideout"

Install the stimulus controller from npm:

npm install @relay_ui/slideout
# or...
./bin/importmap pin @relay_ui/slideout

Register the controller in your index.js:

import SlideoutController from "@relay_ui/slideout"
application.register("slideout", SlideoutController)

Create a view for the slideout contents and wrap it in a `RUI::Slideout` component:

render RUI::Slideout.new do
  div(class: "flex flex-row justify-between items-center p-10") do
    render RUI::Headings::H2.new { "Slideout" }

    # Note the href and data...
    render RUI::Links::Destructive.new(
      href: "#",
      icon: "x",
      data: { action: "slideout#hide" }
    )
  end
end

Add a button to trigger the slideout:

render RUI::Buttons::Primary.new(
  href: slideout_example_path,
  data: { turbo_frame: 'slideout' }
) { "Open Slideout" }