Class: UI::ScrollArea

Inherits:
Phlex::HTML
  • Object
show all
Includes:
ScrollAreaBehavior, SharedAsChildBehavior
Defined in:
app/components/ui/scroll_area.rb

Overview

ScrollArea - Phlex implementation

Augments native scroll functionality for custom, cross-browser styling. Root container with Stimulus controller.

Examples:

Basic usage

render UI::ScrollArea.new(classes: "h-[200px] w-[350px] rounded-md border p-4") do
  div(class: "space-y-4") do
    h3(class: "text-sm font-semibold") { "Tags" }
    div(class: "space-y-1") do
      # Content here
    end
  end
end

Horizontal scrolling

render UI::ScrollArea.new(classes: "w-96 whitespace-nowrap rounded-md border") do
  # Wide content here
end

Instance Method Summary collapse

Methods included from SharedAsChildBehavior

#merge_attributes

Methods included from ScrollAreaBehavior

#scroll_area_classes, #scroll_area_html_attributes

Constructor Details

#initialize(as_child: false, type: "hover", scroll_hide_delay: 600, classes: "", **attributes) ⇒ ScrollArea

Returns a new instance of ScrollArea.

Parameters:

  • as_child (Boolean) (defaults to: false) —

    When true, yields attributes to block instead of rendering div

  • type (String) (defaults to: "hover") —

    Scrollbar visibility behavior (“hover”, “scroll”, “auto”, “always”)

  • scroll_hide_delay (Integer) (defaults to: 600) —

    Delay in ms before hiding scrollbar on hover

  • classes (String) (defaults to: "") —

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



31
32
33
34
35
36
37
 
# File 'app/components/ui/scroll_area.rb', line 31

def initialize(as_child: false, type: "hover", scroll_hide_delay: 600, classes: "", **attributes)
  @as_child = as_child
  @type = type
  @scroll_hide_delay = scroll_hide_delay
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template(&block) ⇒ Object 



39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
# File 'app/components/ui/scroll_area.rb', line 39

def view_template(&block)
  root_attrs = scroll_area_html_attributes.deep_merge(@attributes)

  # Add Stimulus controller and values
  root_attrs[:data] ||= {}
  root_attrs[:data][:controller] = "ui--scroll-area"
  root_attrs[:data][:ui__scroll_area_type_value] = @type
  root_attrs[:data][:ui__scroll_area_scroll_hide_delay_value] = @scroll_hide_delay

  if @as_child && block_given?
    # asChild mode: yield attributes to block, but also render scrollbar and corner
    yield(root_attrs)
    render UI::Scrollbar.new(orientation: "vertical")
    render UI::Corner.new
  else
    # Default mode: render as div with viewport, scrollbar, and corner
    div(**root_attrs) do
      render UI::Viewport.new(&block)
      render UI::Scrollbar.new(orientation: "vertical")
      render UI::Corner.new
    end
  end
end