PHPackages                             havit/craft-twig-components - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. havit/craft-twig-components

ActiveLibrary[Templating & Views](/categories/templating)

havit/craft-twig-components
===========================

Twig components extension

00PHP

Since Feb 28Pushed 2y ago1 watchersCompare

[ Source](https://github.com/iurigustavo/craft-twig-components)[ Packagist](https://packagist.org/packages/havit/craft-twig-components)[ RSS](/packages/havit-craft-twig-components/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Twig components extension
=========================

[](#twig-components-extension)

[![Latest Version on Packagist](https://camo.githubusercontent.com/89899966938bc66bdeb5524f83745c8d8769dcd5bdca1d5147d4a5925c7d2f2d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f68617669742f747769672d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/havit/twig-components)[![Total Downloads](https://camo.githubusercontent.com/769598c5757550889a933f831b6894107afe34aa31242f9c51bf7e3ab0c95c7c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f68617669742f747769672d636f6d706f6e656e74732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/havit/twig-components)

This is a PHP package for automatically create Twig components as tags. This is highly inspired from Laravel Blade Components.

Installation
------------

[](#installation)

You can install the package via Composer:

```
composer require havit/twig-components
```

Configuration
-------------

[](#configuration)

This package work only with Silex and 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());
```

To enable the package just pass your Twig environment object to the function and specify your components folder relative to your Twig templates folder.

### SILEX

[](#silex)

Create Provider

```
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;
        });
    }

}
```

Usage
-----

[](#usage)

The components are just Twig templates in a folder of your choice (e.g. `components`) and can be used anywhere in your Twig templates. The slot variable is any content you will add between the opening and the close tag.

### Named slots

[](#named-slots)

```
{# /components/card.twig #}

        {{ title }}

        {{ body }}

{# /index.twig #}

    title
    Body text

```

Also with the standard syntax.

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

### Attributes

[](#attributes)

You can pass any attribute to the component in different ways. To interprate the content as Twig you need to prepend the attribute name with a `:` but it works also in other ways.

snake-case variables will be converted to kebabCase

Call

```

    Submit

```

Component

```

    {{ $slot }}

```

Compiled

```

    Submit

```

### Component Class

[](#component-class)

```