47 lines
1.3 KiB
Elixir
47 lines
1.3 KiB
Elixir
defmodule RiverConnectWeb.Components.UI.ScrollArea do
|
|
@moduledoc """
|
|
Implementation of a scroll area component with custom styling.
|
|
|
|
The scroll area provides a consistent scrolling experience across different browsers
|
|
and platforms, with customizable styling for the scrollbar.
|
|
|
|
## Examples:
|
|
|
|
<.scroll_area class="h-[200px]">
|
|
<div class="p-4">
|
|
<h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
|
|
<%= for tag <- 1..50 do %>
|
|
<div class="text-sm">
|
|
v1.2.0-beta.<%= tag %>
|
|
</div>
|
|
<.separator class="my-2" />
|
|
<% end %>
|
|
</div>
|
|
</.scroll_area>
|
|
"""
|
|
use RiverConnectWeb.Components.UI, :component
|
|
|
|
@doc """
|
|
Renders a custom scrollable area.
|
|
|
|
## Options
|
|
|
|
* `:class` - Additional CSS classes to apply to the scroll area container
|
|
"""
|
|
attr :class, :string, default: nil
|
|
attr :rest, :global
|
|
slot :inner_block
|
|
|
|
def scroll_area(assigns) do
|
|
~H"""
|
|
<div class={classes(["relative overflow-hidden", @class])} {@rest}>
|
|
<div class="salad-scroll-area rounded-[inherit] h-full w-full overflow-y-auto overflow-x-hidden">
|
|
<div class="-mr-3" style="min-width: 100%;">
|
|
{render_slot(@inner_block)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|