Class: PhlexKit::ScrollArea

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/scroll_area/scroll_area.rb

Overview

Styled scroll container, ported from shadcn/ui's ScrollArea. Radix's custom scrollbars are replaced with native thin scrollbars themed via CSS — no JS. Constrain it with a height/width from the caller. tabindex=0 makes the scrollable region keyboard-focusable (WCAG scrollable-region-focusable). Pass aria: { label: ... } (or aria-labelledby) to name it — only then does it render role=region; a nameless region is noise for AT, so the role is omitted when unlabelled. .pk-scroll-area (scroll_area.css).

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(**attrs) ⇒ ScrollArea

Returns a new instance of ScrollArea.



10
11
12
 
# File 'app/components/phlex_kit/scroll_area/scroll_area.rb', line 10

def initialize(**attrs)
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



14
15
16
17
18
 
# File 'app/components/phlex_kit/scroll_area/scroll_area.rb', line 14

def view_template(&)
  base = { class: "pk-scroll-area", tabindex: "0" }
  base[:role] = "region" if labelled?
  div(**mix(base, @attrs), &)
end