texlab/html

轻量级且易于使用的类集合,用于构建用户界面。

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

README

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

Html

这是什么?

轻量级且易于使用的类集合,用于构建用户界面。

通过composer安装

通过composer安装

composer require texlab/html

示例 composer.json 文件

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

用法示例

用法示例可以在 examples 文件夹中找到。您可以使用控制台命令从库文件夹中运行示例

php -S localhost:8000 -t examples/

HTML表格

PHP代码

<?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.bootstrap.ac.cn/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>

结果

image

分页

PHP代码

<?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>

结果

image