SlopUI.Components.ScrollArea (SlopUI v0.1.0)

Copy Markdown View Source

A scroll container with thin styled scrollbars and optional edge shadows.

Summary

Functions

Renders a scrollable region.

Functions

scroll_area(assigns)

Renders a scrollable region.

<.scroll_area label="Changelog" style="max-block-size: 16rem">
  <p :for={entry <- @entries}>{entry}</p>
</.scroll_area>

<.scroll_area label="Timeline" orientation="horizontal" shadows={false}></.scroll_area>

Constrain it with max-block-size (or max-inline-size for horizontal) through style or your own class. The region is focusable and named, so keyboard users can tab to it and scroll with the arrow keys. Shadows fade in at the edges that have more content, driven by scroll-timeline animations where supported and simply absent elsewhere. No JavaScript.

Attributes

  • label (:string) (required) - accessible name of the region.
  • orientation (:string) - Defaults to "vertical". Must be one of "vertical", "horizontal", or "both".
  • shadows (:boolean) - Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)