63 lines
2.6 KiB
PHP
63 lines
2.6 KiB
PHP
<?php
|
|
|
|
require_once __DIR__ . '/../vendor/autoload.php';
|
|
|
|
use PHPNative\Framework\Application;
|
|
use PHPNative\Ui\Widget\Button;
|
|
use PHPNative\Ui\Widget\Container;
|
|
use PHPNative\Ui\Window;
|
|
|
|
$app = new Application();
|
|
$window = new Window('Gap Test', 600, 400);
|
|
|
|
// Main container
|
|
$mainContainer = new Container('flex flex-col p-4 bg-gray-100 gap-4');
|
|
|
|
// Test 1: Row with gap-2
|
|
$test1 = new Container('flex flex-col gap-2');
|
|
$test1->addComponent(new \PHPNative\Ui\Widget\Label('Test 1: flex-row gap-2', 'text-lg font-bold'));
|
|
$row1 = new Container('flex flex-row gap-2 bg-white p-4');
|
|
$row1->addComponent(new Button('Button 1', 'px-4 py-2 bg-blue-600 text-white rounded'));
|
|
$row1->addComponent(new Button('Button 2', 'px-4 py-2 bg-green-600 text-white rounded'));
|
|
$test1->addComponent($row1);
|
|
$mainContainer->addComponent($test1);
|
|
|
|
// Test 2: Row with gap-4
|
|
$test2 = new Container('flex flex-col gap-2');
|
|
$test2->addComponent(new \PHPNative\Ui\Widget\Label('Test 2: flex-row gap-4', 'text-lg font-bold'));
|
|
$row2 = new Container('flex flex-row gap-4 bg-white p-4');
|
|
$row2->addComponent(new Button('Button A', 'px-4 py-2 bg-red-600 text-white rounded'));
|
|
$row2->addComponent(new Button('Button B', 'px-4 py-2 bg-purple-600 text-white rounded'));
|
|
$test2->addComponent($row2);
|
|
$mainContainer->addComponent($test2);
|
|
|
|
// Test 3: Row with gap-8
|
|
$test3 = new Container('flex flex-col gap-2');
|
|
$test3->addComponent(new \PHPNative\Ui\Widget\Label('Test 3: flex-row gap-8', 'text-lg font-bold'));
|
|
$row3 = new Container('flex flex-row gap-8 bg-white p-4');
|
|
$row3->addComponent(new Button('Btn X', 'px-4 py-2 bg-orange-600 text-white rounded'));
|
|
$row3->addComponent(new Button('Btn Y', 'px-4 py-2 bg-pink-600 text-white rounded'));
|
|
$test3->addComponent($row3);
|
|
$mainContainer->addComponent($test3);
|
|
|
|
// Test 4: Column with gap-4
|
|
$test4 = new Container('flex flex-col gap-2');
|
|
$test4->addComponent(new \PHPNative\Ui\Widget\Label('Test 4: flex-col gap-4', 'text-lg font-bold'));
|
|
$col = new Container('flex flex-col gap-4 bg-white p-4');
|
|
$col->addComponent(new Button('Top Button', 'px-4 py-2 bg-teal-600 text-white rounded'));
|
|
$col->addComponent(new Button('Bottom Button', 'px-4 py-2 bg-indigo-600 text-white rounded'));
|
|
$test4->addComponent($col);
|
|
$mainContainer->addComponent($test4);
|
|
|
|
$window->setRoot($mainContainer);
|
|
$app->addWindow($window);
|
|
|
|
echo "Gap Test Example\n";
|
|
echo "You should see:\n";
|
|
echo "- Row 1: 2 buttons with 8px gap (gap-2)\n";
|
|
echo "- Row 2: 2 buttons with 16px gap (gap-4)\n";
|
|
echo "- Row 3: 2 buttons with 32px gap (gap-8)\n";
|
|
echo "- Column: 2 buttons stacked with 16px gap (gap-4)\n\n";
|
|
|
|
$app->run();
|