texlab/html

Lightweight and easy to use set of classes for building user interfaces.

v0.19 2020-09-19 22:24 UTC

README

Build Status License: MIT Minimum PHP Version Packagist PHPStan Psalm Coverage Status

Html

What is it?

Lightweight and easy to use set of classes for building user interfaces.

Install via composer

Installation via composer

composer require texlab/html

Example composer.json file

{
    "require": {
        "texlab/html": "^0.19"
    }
}

Usage examples

Usage examples can be found in the examples folder. You can run the examples from the library folder using the console command:

php -S localhost:8000 -t examples/

HTML table

PHP code:

<?php

require_once "../vendor/autoload.php";

$table = TexLab\Html\Html::table();

$data = [
    ['id' => 1, 'name' => 'Peter', 'Director'],
    ['id' => 3, 'name' => 'Viktor', 'Manager'],
    ['id' => 7, 'name' => 'Mark', 'Worker']
];

$headers = ['id' => '', 'name' => 'Name', 'Description'];

$table
    ->setClass("table")
    ->setData($data)
    ->addHeaders($headers)
    ->loopByRow(function (&$row) {
        $row['edit'] = "<a href='?edt_id=$row[id]'>✏</a>";
        $row['del'] = "<a href='?del_id=$row[id]'>❌</a>";
    });

?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<?= $table->html() ?>
</body>
</html>

Result:

image

Pagination

PHP code:

<?php

require_once "../vendor/autoload.php";

$pagination = TexLab\Html\Html::pagination();

$pagination
    ->setClass("pagination")
    ->setUrlPrefix("?type=table&action=show")
    ->setPrevious('Previous')
    ->setFirst('First')
    ->setLast('Last')
    ->setNext('Next')
    ->setPageCount(8)
    ->setCurrentPage(3);
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .pagination a {
            color: green;
            text-decoration: none;
        }

        .pagination .current {
            color: red;
        }
    </style>
</head>
<body>
<?= $pagination->html() ?>
</body>
</html>

Result:

image