Tab Navigation Demo

Demonstrating Stimulus Outlets API and dispatch() with Opal + Ruby

Welcome to Tabs Demo

This example demonstrates two powerful Stimulus features implemented in Ruby using Opal:

  • Outlets API: The tabs controller connects to panel controllers
  • stimulus_dispatch(): Custom events for inter-controller communication
  • Animated Transitions: Smooth panel switching with CSS animations

Current Panel Index: 0

Key Features

Outlets API

The tabs controller declares static outlets = ["panel"] to connect with all panel controllers in the DOM.

Helper Methods

Uses has_outlet?, get_outlets, and call_all_outlets from StimulusHelpers.

Event Dispatch

Emits tabs:change events using stimulus_dispatch() for loose coupling.

Current Panel Index: 1

How It Works

TabsController (Ruby)

class TabsController < StimulusController
  include OpalVite::Concerns::V1::StimulusHelpers

  # Define outlets connection
  self.outlets = ["panel"]

  def select
    index = action_param_int(:index)

    # Call hide on all panels using outlets
    call_all_outlets(:panel, :hide)

    # Dispatch event on window for panel controllers
    dispatch_window_event("tabs:change", { index: index })
  end
end

PanelController (Ruby)

class PanelController < StimulusController
  include OpalVite::Concerns::V1::StimulusHelpers

  self.values = { index: :number }

  def connect
    # Listen for tabs:change events
    on_window_event('tabs:change') do |e|
      handle_change(e)
    end
  end

  def show
    element_remove_class('panel-hidden')
    element_add_class('panel-visible')
  end

  def hide
    element_remove_class('panel-visible')
    element_add_class('panel-hidden')
  end
end

Current Panel Index: 2

Settings & Configuration

Current Panel Index: 3

About This Demo

This tab navigation is built entirely with Ruby using Opal to compile to JavaScript. The controllers communicate using Stimulus Outlets and custom events.

Open your browser's console to see the Ruby controllers in action!