Scroll Area

Overview

ScrollArea composes NaviusScrollArea + NaviusScrollAreaViewport in one root: the ChildContent renders inside the viewport, and a vertical ZitsScrollBar (itself NaviusScrollAreaScrollbar + NaviusScrollAreaThumb) plus NaviusScrollAreaCorner render alongside it by default.

Install

navius add scroll-area --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsScrollArea class="h-72 w-48 rounded-md border">
    <div class="p-4">
        @foreach (var tag in _tags)
        {
            <div class="text-sm">@tag</div>
        }
    </div>
</ZitsScrollArea>

Parts and props

Type, ScrollHideDelay, and Dir are the primitive’s own props and pass through unchanged. The styled root adds:

Prop	Type	Default	Description
Scrollbars	RenderFragment?	null	Overrides the default single vertical ZitsScrollBar (e.g. to add a horizontal scrollbar alongside it).

ZitsScrollBar (composable directly when using the Scrollbars override):

Prop	Type	Default	Description
Orientation	string	"vertical"	"vertical" or "horizontal"; selects the layout classes.
ForceMount	bool	false	Forwarded to NaviusScrollAreaScrollbar.

Styling surface

class/Attributes on ZitsScrollArea merges with the root’s base class via Cn.Merge; the viewport’s class is fixed. ZitsScrollBar’s class merges with its orientation-driven base class.

Parameter	Values
Type	auto · always · hover · scroll
ZitsScrollBar.Orientation	vertical · horizontal

Data attribute hooks

None referenced by the styled classes; the wrapper’s own Tailwind classes are static per Orientation/layout, not driven by a data-attribute selector.

Underlying primitives

• NaviusScrollArea