DevactionUI.ScrollArea (devaction_ui v0.3.1)

Copy Markdown View Source

An area that scrolls on its own, with a thin bar and a shadow only at the edges that still have content behind them: the left one shows once you have scrolled right, the right one while there is more to the right. Under a sticky table header it also adds a shadow once the rows have moved under it. The DevactionUI.ScrollArea hook marks the root with data-more-left, data-more-right, data-more-top, data-more-bottom and data-scrolled-y, and LiveView is told to leave those alone.

max_h is a CSS length ("560px") that limits the height, so it scrolls vertically too. A table with sticky columns fixes their width in edge_left and edge_right, so the shadow starts after them. The viewport is focusable, so the keyboard can scroll it; name it with label, which makes it a region.

<ScrollArea.scroll_area id="projects" max_h="360px" label="Projects" edge_right="56px">
  <table>...</table>
</ScrollArea.scroll_area>

Summary

Functions

scroll_area(assigns)

The scroll area.

Functions

scroll_area(assigns)

@spec scroll_area(map()) :: Phoenix.LiveView.Rendered.t()

The scroll area.

Attributes

  • id (:string) (required)
  • label (:string) - names the scrolling region for assistive technology. Defaults to nil.
  • max_h (:string) - a CSS length; without it the area grows with its content. Defaults to nil.
  • bare (:boolean) - no border and no rounded corners. Defaults to false.
  • edge_left (:string) - the width of a fixed column on the left. Defaults to nil.
  • edge_right (:string) - the width of a fixed column on the right. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)