LineaUI.Components.ScrollArea (linea_ui v0.3.0)

Copy Markdown View Source

A box that scrolls with LineOne's thin scrollbar (scrollbar-sm): 6px, no arrows, a transparent track and a thumb that shows when the pointer or the focus is inside. For long menus, lists in a card, the body of a panel.

<.scroll_area class="max-h-64">
  <.dropdown_item :for={city <- @cities}>{city}</.dropdown_item>
</.scroll_area>

The height comes from class (max-h-64, h-full...). Without the component, the same scrollbar is the scrollbar-sm class on any box that overflows; scrollbar-sm scrollbar-always keeps the thumb shown, and LineOne's is-scrollbar-hidden hides it.

Summary

Functions

scroll_area(assigns)

Renders a scrolling box.

Functions

scroll_area(assigns)

Renders a scrolling box.

Attributes

  • orientation (:string) - The directions it scrolls in. Defaults to "vertical". Must be one of "both", "horizontal", or "vertical".
  • scrollbar (:string) - hover shows the thumb under the pointer or the focus, always keeps it, hidden hides it. Defaults to "hover". Must be one of "always", "hidden", or "hover".
  • focusable (:boolean) - Makes the box reachable with Tab, so the keyboard can scroll it (when nothing inside takes focus). Defaults to false.
  • class (:any) - Its size (max-h-64, h-full) and padding. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)