README

这是一个PHP包，用于自动创建以标签形式的Twig组件。它高度灵感来源于Laravel Blade组件。

安装

您可以通过Composer安装此包

composer require havit/twig-components

配置

此包仅与Silex和PHP 7.1兼容

$app['twig.options'] = [
    'debug'      => true,
    'cache'      => __DIR__.'/../storage/cache/twig',
    'components' => [
        'path'      => 'components',
        'namespace' => 'App\View',
    ],
];

$app->register(new \App\Provider\TwigComponentsServiceProvider());

要启用此包，只需将您的Twig环境对象传递给函数，并指定相对于您的Twig模板文件夹的组件文件夹。

SILEX

创建提供者

use Pimple\{Container, ServiceProviderInterface};

class TwigComponentsServiceProvider implements ServiceProviderInterface
{
    public function register(Container $app)
    {
        $app->extend('twig', function (\Twig_Environment $twig, $app) {
            $twig->addExtension(new \Havit\TwigComponents\Extension\ComponentExtension($twig));
            $twig->setLexer(new \Havit\TwigComponents\Lexer\ComponentLexer($twig));

            return $twig;
        });
    }

}

用法

组件只是您选择的一个文件夹中的Twig模板（例如components），可以在您的Twig模板的任何地方使用。slot变量是在开标签和闭标签之间添加的任何内容。

命名插槽

{# /components/card.twig #}
<div {{ attributes.class('bg-white shadow p-3 rounded') }}>
    <h2 {{ title.attributes.class('font-bold') }}>
        {{ title }}
    </h2>
    <div>
        {{ body }}
    </div>
</div>

{# /index.twig #}
<x-card>
    <x-slot name="title" class="text-2xl">title</x-slot>
    <x-slot name="body">Body text</x-slot>
</x-card>

也可以使用标准语法。

{# /index.twig #}
{% x:card %}
    {% slot:title with {class: "text-2xl"} %}
        Title
    {% endslot %}
    {% slot:body %}
        Title
    {% endslot %}
{% endx %}

属性

您可以通过不同的方式向组件传递任何属性。要将内容解释为Twig，需要将属性名以:开头，但也可以以其他方式工作。

snake-case变量将被转换为kebabCase

调用

<x-button 
    :class="'btn-' ~ 'success'"
    type="{{'this' ~ 'works' ~ 'too'}}" 
    action="or this"
    this="{{'this' ~ 'does'}}{{ 'not work' }}"
    data-key="foo"
>
    Submit
</x-button>

组件

<a href="{{ action }}" {{ attributes.class('btn btn-sm me-3') }} data-type="{{ type }}" data-key="{{ dataKey }}">
    {{ $slot }}
</a>

编译

<a href="or this" class="btn btn-sm me-3 btn-success" data-type="thisworkstoo" data-key="foo">
    Submit
</a>

组件类

<?php

namespace App\View;

use App\Application;

class Test extends \Havit\TwigComponents\View\Component
{

    public $title    = '';

    public function __construct(string $title = 'xyz')
    {
        $this->title = $title;
    }

    public function handle(Application $app)
    {
        // Do something
        $this->title = $app->trans($this->title);
    }

    public function template(): string
    {
        return 'components/test.twig';
    }
}

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.


## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.