EssenceUI.Components.ScrollArea (Essence UI v0.2.0)

Copy Markdown View Source

A component for custom scrollbars.

Themed ScrollArea. Wraps EssenceUI.Primitives.ScrollArea.

Examples

<.scroll_area style="height: 200px" scrollbars="vertical">
  <div style="padding: 20px">
    <p>Long content here...</p>
  </div>
</.scroll_area>

Props

  • size - "1", "2", "3" (default: "1")
  • type - "auto", "always", "scroll", "hover" (default: "hover")
  • scrollbars - "vertical", "horizontal", "both" (default: "both")
  • radius - "none", "small", "medium", "large", "full"
  • scroll_hide_delay - Delay in ms before hiding scrollbars (default: 0, or 600 when type is "scroll")

Summary

Functions

scroll_area(assigns)

ScrollArea root component.

Functions

scroll_area(assigns)

ScrollArea root component.

Attributes

  • id (:string) - Defaults to nil.
  • size (:string) - Defaults to "1". Must be one of "1", "2", or "3".
  • type (:string) - Defaults to "hover". Must be one of "auto", "always", "scroll", or "hover".
  • scrollbars (:string) - Defaults to "both". Must be one of "vertical", "horizontal", or "both".
  • scroll_hide_delay (:integer) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • style (:string) - Defaults to nil.
  • p (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • px (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • py (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • pt (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • pr (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • pb (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • pl (:any) - Padding utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • width (:any) - Width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • max_width (:any) - Max width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • min_width (:any) - Min width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • height (:any) - Height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • max_height (:any) - Max height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • min_height (:any) - Min height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
  • position (:string) - CSS position property. Responsive supported. Must be one of "static", "relative", "absolute", "fixed", or "sticky".
  • inset (:string) - CSS inset property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • top (:string) - CSS top property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • right (:string) - CSS right property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • bottom (:string) - CSS bottom property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • left (:string) - CSS left property. Accepts scale values, CSS strings, responsive. Must be one of "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "-1", "-2", "-3", "-4", "-5", "-6", "-7", "-8", or "-9".
  • overflow (:string) - CSS overflow property. Responsive supported. Must be one of "visible", "hidden", "clip", "scroll", or "auto".
  • overflow_x (:string) - CSS overflow-x property. Responsive supported. Must be one of "visible", "hidden", "clip", "scroll", or "auto".
  • overflow_y (:string) - CSS overflow-y property. Responsive supported. Must be one of "visible", "hidden", "clip", "scroll", or "auto".
  • flex_basis (:string) - CSS flex-basis property. Responsive supported.
  • flex_shrink (:string) - CSS flex-shrink property. Responsive supported. Must be one of "0", or "1".
  • flex_grow (:string) - CSS flex-grow property. Responsive supported. Must be one of "0", or "1".
  • grid_area (:string) - CSS grid-area property. Responsive supported.
  • grid_column (:string) - CSS grid-column property. Responsive supported.
  • grid_column_start (:string) - CSS grid-column-start property. Responsive supported.
  • grid_column_end (:string) - CSS grid-column-end property. Responsive supported.
  • grid_row (:string) - CSS grid-row property. Responsive supported.
  • grid_row_start (:string) - CSS grid-row-start property. Responsive supported.
  • grid_row_end (:string) - CSS grid-row-end property. Responsive supported.
  • m (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mx (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • my (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mt (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mr (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • mb (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • ml (:any) - Margin utility class string or map. Example: 1 or %{xs: '1', sm: '2'}.
  • radius (:string) - Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. Must be one of "none", "small", "medium", "large", or "full".
  • Global attributes are accepted.

Slots

  • inner_block (required)