65 lines
2.0 KiB
PHP
65 lines
2.0 KiB
PHP
<?php
|
|
|
|
require_once __DIR__ . '/../vendor/autoload.php';
|
|
|
|
use PHPNative\Framework\Application;
|
|
use PHPNative\Ui\Widget\Container;
|
|
use PHPNative\Ui\Widget\Label;
|
|
|
|
// Check PHP version
|
|
if (PHP_VERSION_ID < 80100) {
|
|
die("This demo requires PHP 8.1+ for Fiber support.\nYour version: " . PHP_VERSION . "\n");
|
|
}
|
|
|
|
$app = new Application('Overflow Scroll Demo', 800, 600);
|
|
|
|
// Main container
|
|
$mainContainer = new Container(style: 'p-4 bg-gray-100');
|
|
|
|
// Title
|
|
$title = new Label(text: 'Overflow Scroll Demo', style: 'text-xl text-black p-2');
|
|
$mainContainer->addComponent($title);
|
|
|
|
// Example 1: Vertical scroll with overflow-y-auto
|
|
$scrollContainer = new Container(style: 'overflow-y-auto bg-white m-4 p-4 h-200');
|
|
|
|
// Add many items to trigger overflow
|
|
for ($i = 1; $i <= 20; $i++) {
|
|
$item = new Container(style: 'bg-blue-500 m-2 p-3 rounded-lg');
|
|
$label = new Label(
|
|
text: "Item {$i} - Scroll vertically with mouse wheel or drag the scrollbar",
|
|
style: 'text-white'
|
|
);
|
|
$item->addComponent($label);
|
|
$scrollContainer->addComponent($item);
|
|
}
|
|
|
|
$mainContainer->addComponent($scrollContainer);
|
|
|
|
// Example 2: Horizontal scroll with overflow-x-auto
|
|
$label2 = new Label(text: 'Horizontal Scroll:', style: 'text-black p-2');
|
|
$mainContainer->addComponent($label2);
|
|
|
|
$horizontalScroll = new Container(style: 'flex flex-row overflow-x-auto bg-white m-4 p-4 h-100');
|
|
|
|
for ($i = 1; $i <= 10; $i++) {
|
|
$box = new Container(style: 'w-150 bg-green-500 m-2 p-3 rounded-lg');
|
|
$boxLabel = new Label(text: "Box {$i}", style: 'text-white');
|
|
$box->addComponent($boxLabel);
|
|
$horizontalScroll->addComponent($box);
|
|
}
|
|
|
|
$mainContainer->addComponent($horizontalScroll);
|
|
|
|
// Instructions
|
|
$instructions = new Container(style: 'bg-yellow-200 p-4 m-4 rounded-lg');
|
|
$instructionText = new Label(
|
|
text: 'Use mouse wheel to scroll. Click and drag scrollbars.',
|
|
style: 'text-black'
|
|
);
|
|
$instructions->addComponent($instructionText);
|
|
$mainContainer->addComponent($instructions);
|
|
|
|
$app->setRoot($mainContainer);
|
|
$app->run();
|