Packages
mishka_chelekom
0.0.9-beta.2
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
priv/headless/scroll_area.eex
defmodule <%= @module %> do
@moduledoc """
Headless **scroll area** — a scrollable viewport with a custom scrollbar (Base UI parity).
The native scrollbar is hidden; the `ScrollArea` engine drives a custom `scrollbar` + `thumb`: the
thumb is sized proportionally to the content (via `--scroll-area-thumb-height/width`), tracks the
scroll position, is draggable, and its scrollbar hides when that axis doesn't overflow. `orientation`
selects which scrollbars render (`vertical` · `horizontal` · `both`).
State (on root/viewport/scrollbar/content) mirrors Base UI: `data-scrolling`, `data-hovering`
(scrollbar), `data-has-overflow-x`/`-y`, `data-overflow-{x,y}-{start,end}`. The distance from each
edge is exposed as `--scroll-area-overflow-{x,y}-{start,end}` (px) so you can fade the edges. Anatomy:
`viewport`, `content`, `scrollbar` (per orientation), `thumb`, `corner`. Style via `chelekom-scroll_area*`.
WAI-ARIA APG: no formal pattern; the viewport is focusable for keyboard scrolling.
"""
use Phoenix.Component
@doc type: :component
attr :id, :string, required: true
attr :orientation, :string, default: "vertical", values: ~w(vertical horizontal both)
attr :class, :any, default: nil
attr :rest, :global
slot :inner_block, required: true
def <%= @component_prefix %>scroll_area(assigns) do
~H"""
<div
id={@id}
phx-hook="ScrollArea"
data-orientation={@orientation}
class={["chelekom-scroll_area", @class]}
{@rest}
>
<div data-part="viewport" tabindex="0" class="chelekom-scroll_area__viewport">
<div data-part="content" class="chelekom-scroll_area__content">
{render_slot(@inner_block)}
</div>
</div>
<div
:if={@orientation in ~w(vertical both)}
data-part="scrollbar"
data-orientation="vertical"
class="chelekom-scroll_area__scrollbar"
>
<div data-part="thumb" data-orientation="vertical" class="chelekom-scroll_area__thumb"></div>
</div>
<div
:if={@orientation in ~w(horizontal both)}
data-part="scrollbar"
data-orientation="horizontal"
class="chelekom-scroll_area__scrollbar"
>
<div data-part="thumb" data-orientation="horizontal" class="chelekom-scroll_area__thumb"></div>
</div>
<div :if={@orientation == "both"} data-part="corner" class="chelekom-scroll_area__corner"></div>
</div>
"""
end
end