README

一个可自定义和可扩展的HTML UI构建器

此包提供了一种在PHP中创建用于Bootstrap等CSS框架的UI的统一API。

它扩展了PHP HTML构建器，增加了创建菜单、表单、标签等UI组件的功能。

动机

这个UI构建器最初是为Jaxon DbAdmin创建的，这是一个可以将到现有PHP应用程序页面中的数据库管理仪表板。它的用户界面需要尽可能少地适应各种CSS框架。因此，为每个支持的CSS框架重写所有视图并不是一个令人满意的选择。

使用此UI构建器，应用的UI只编写一次，CSS框架的HTML代码将自动生成。添加对特定CSS框架的支持因此更容易且更少出错。

入门

src/目录中的BuilderInterface定义了可用于构建用户界面的函数，除了由PHP HTML构建器提供的那些。虽然后者仅生成HTML代码，但BuilderInterface函数还会为UI组件添加框架定义的CSS类。

生成最终HTML代码的类由一个单独的包提供，除了这个包之外，还必须安装该包。

先决条件

此包需要PHP版本7.1或更高。

安装

使用Composer安装包。在下面的示例中，我们将为Bootstrap框架构建简单的UI组件。

composer require ui-builder ui-builder-bootstrap

用法

BuilderInterface定义了用于构建UI组件的函数。在此示例中，它作为参数传递给View类构造函数。

use Lagdo\UiBuilder\BuilderInterface;

class View
{
    /**
     * @var BuilderInterface
     */
    protected $uiBuilder;

    /**
     * @param BuilderInterface
     */
    public function __construct(BuilderInterface $uiBuilder)
    {
        $this->uiBuilder = $uiBuilder;
    }

    /**
     * Get the HTML code of a simple form
     *
     * @param array $formData
     * @return string
     */
    public function getSimpleForm(array $formData)
    {
        $this->uiBuilder->clear()
            ->form(true)->setId('form-id')
                ->formRow()
                    ->formCol(4)
                        ->formLabel()->setFor('name')->addText('Name')
                        ->end()
                    ->end()
                    ->formCol(8)
                        ->formInput()->setType('text')->setName('name')->setPlaceholder('Name')
                            ->setValue($formData['name'])
                        ->endShorted()
                    ->end()
                ->end()
                ->formRow()
                    ->formCol(4)
                        ->formLabel()->setFor('description')->addText('Description')
                        ->end()
                    ->end()
                    ->formCol(8)
                        ->formTextarea()->setRows('10')->setName('description')->setWrap('on')
                            ->setSpellcheck('false')->addText($formData['description'])
                        ->end()
                    ->end()
                ->end()
            ->end();
        return $this->uiBuilder->build();
    }
}

根据传递给View构造函数的类实例，将生成不同的HTML代码。

以下PHP代码中，

use Lagdo\UiBuilder\Bootstrap\Bootstrap3\Builder;

$view = new View(new Builder());

getSimpleForm()函数将生成Bootstrap 3的代码。

<form class="form-horizontal" id="form-id">
    <div class="form-group">
        <div class="col-md-4">
            <label class="control-label" for="name">Name</label>
        </div>
        <div class="col-md-8">
            <input class="form-control" type="text" name="name" placeholder="Name" value="" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-4">
            <label class="control-label" for="description">Description</label>
        </div>
        <div class="col-md-8">
            <textarea class="form-control" rows="10" name="description" wrap="on" spellcheck="false"></textarea>
        </div>
    </div>
</form>

以下PHP代码中，

use Lagdo\UiBuilder\Bootstrap\Bootstrap4\Builder;

$view = new View(new Builder());

相同的getSimpleForm()函数将生成Bootstrap 4的代码。

<form id="form-id">
    <div class="form-group row">
        <div class="col-md-4">
            <label class="col-form-label" for="name">Name</label>
        </div>
        <div class="col-md-8">
            <input class="form-control" type="text" name="name" placeholder="Name" value="" />
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-4">
            <label class="col-form-label" for="description">Description</label>
        </div>
        <div class="col-md-8">
            <textarea class="form-control" rows="10" name="description" wrap="on" spellcheck="false"></textarea>
        </div>
    </div>
</form>

文档

即将推出...

路线图

• 在界面中添加更多组件
• 添加更多UI框架的支持
• 添加测试

查看公开问题以获取完整的功能建议（和已知问题）列表。

贡献

贡献使开源社区成为一个如此令人惊叹的学习、灵感和创造的地方。您所做的任何贡献都将被强烈赞赏。

如果您有任何建议可以使此项目变得更好，请将该仓库fork并创建一个pull request。您也可以简单地通过带有“enhancement”标签的问题来提出建议。别忘了给项目加星！再次感谢！

1. 分支项目
2. 创建您的功能分支（git checkout -b feature/AmazingFeature）
3. 提交您的更改（git commit -m '添加一些AmazingFeature'）
4. 将更改推送到分支（git push origin feature/AmazingFeature）
5. 打开Pull Request

许可证

在MIT许可证下分发。更多信息请参阅LICENSE.txt。