73 lines
2.2 KiB
PHP
73 lines
2.2 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('Flexbox Layout Demo', 800, 600);
|
|
|
|
// Main container with padding
|
|
$mainContainer = new Container(style: 'p-4 bg-gray-100');
|
|
|
|
// Example 1: Flex Row with basis
|
|
$row1 = new Container(style: 'flex flex-row bg-white m-2 p-2');
|
|
|
|
$box1 = new Container(style: 'basis-1/3 bg-blue-500 p-4');
|
|
$label1 = new Label(text: '33% Basis', style: 'text-white');
|
|
$box1->addComponent($label1);
|
|
|
|
$box2 = new Container(style: 'basis-1/3 bg-green-500 p-4');
|
|
$label2 = new Label(text: '33% Basis', style: 'text-white');
|
|
$box2->addComponent($label2);
|
|
|
|
$box3 = new Container(style: 'basis-1/3 bg-red-500 p-4');
|
|
$label3 = new Label(text: '33% Basis', style: 'text-white');
|
|
$box3->addComponent($label3);
|
|
|
|
$row1->addComponent($box1);
|
|
$row1->addComponent($box2);
|
|
$row1->addComponent($box3);
|
|
|
|
// Example 2: Flex Row with flex-grow
|
|
$row2 = new Container(style: 'flex flex-row bg-white m-2 p-2');
|
|
|
|
$fixedBox = new Container(style: 'w-200 bg-purple-500 p-4');
|
|
$fixedLabel = new Label(text: 'Fixed 200px', style: 'text-white');
|
|
$fixedBox->addComponent($fixedLabel);
|
|
|
|
$growBox = new Container(style: 'flex-1 bg-yellow-500 p-4');
|
|
$growLabel = new Label(text: 'Flex Grow (rest)', style: 'text-black');
|
|
$growBox->addComponent($growLabel);
|
|
|
|
$row2->addComponent($fixedBox);
|
|
$row2->addComponent($growBox);
|
|
|
|
// Example 3: Flex Column
|
|
$col1 = new Container(style: 'flex flex-col bg-white m-2 p-2 h-200');
|
|
|
|
$colBox1 = new Container(style: 'basis-1/2 bg-cyan-500 p-4');
|
|
$colLabel1 = new Label(text: '50% Height', style: 'text-white');
|
|
$colBox1->addComponent($colLabel1);
|
|
|
|
$colBox2 = new Container(style: 'basis-1/2 bg-orange-500 p-4');
|
|
$colLabel2 = new Label(text: '50% Height', style: 'text-white');
|
|
$colBox2->addComponent($colLabel2);
|
|
|
|
$col1->addComponent($colBox1);
|
|
$col1->addComponent($colBox2);
|
|
|
|
// Add all examples to main container
|
|
$mainContainer->addComponent($row1);
|
|
$mainContainer->addComponent($row2);
|
|
$mainContainer->addComponent($col1);
|
|
|
|
$app->setRoot($mainContainer);
|
|
$app->run();
|