ScrollArea

Home Scroll Area

The ScrollArea component creates a scrollable region with custom scrollbars and smooth behavior. It’s ideal for containing content that exceeds its visible bounds in a polished way.

<?php

use Lib\PHPXUI\ScrollArea;
use Lib\PHPXUI\Separator;

?>

<ScrollArea class="h-72 w-48 rounded-md border">
    <div class="p-4">
        <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
        <template pp-for="tag in tags">
            <div class="contents" key="{tag}">
                <div class="text-sm">{tag}</div>
                <Separator class="my-2" />
            </div>
        </template>
    </div>
</ScrollArea>

<script>
    const [tags] = pp.state(
        Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
    );
</script>

Installation

npm

npx phpxui add ScrollArea

Usage

use Lib\PHPXUI\ScrollArea;

<ScrollArea class="h-50 w-87.5 rounded-md border p-4">
    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>

Command Palette

Tags

Installation

Usage

Examples

Horizontal Scrolling

ScrollArea const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add ScrollArea'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

Tags

Installation

Usage

Examples

Horizontal Scrolling