Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Usage
Import the component. It's mandatory to wrap the whole component with the Tailwind tag.
const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const { ScrollArea, ScrollBar } = VM.require(
"uiisnear.near/widget/scrollArea"
);
if (Tailwind == undefined) return "";
<Tailwind>
<ScrollArea>
Jokester began sneaking into the castle in the middle of the night and leaving
jokes all over the place: under the king's pillow, in his soup, even in the
royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
then, one day, the people of the kingdom discovered that the jokes left by
Jokester were so funny that they couldn't help but laugh. And once they
started laughing, they couldn't stop.
</ScrollArea>
</Tailwind>
API Reference
ScrollArea
Contains all of the progress parts.
Prop | Type | Default |
---|---|---|
type | enum | "hover" |
scrollHideDelay | number | 600 |
dir | enum | --- |
ScrollBar
Contains all of the progress parts.
Prop | Type | Default |
---|---|---|
forceMount | boolean | --- |
orientation | enum | "vertical" |
Data attribute | Values |
---|---|
[data-state] | "visible" | "hidden" |
[data-orientation] | "vertical" | "horizontal" |
Classnames
Classnames available to customize the component.
Function | Classname |
---|---|
ScrollArea | scrollAreaClassName |