README

Extension for Pug-php and Phug to use components in templates

Installation

composer require phug/component

Enable it globally:

\Phug\Component\ComponentExtension::enable();

To enable it automatically when calling static methods render, renderFile, display, displayFile etc. on either \Pug\Facade or \Phug\Phug class.

If using in a \Pug\Pug or \Phug\Renderer instance, add the ComponentExtension class to modules:

$pug = new \Pug\Pug([/*options*/]);
\Phug\Component\ComponentExtension::enable($pug);

Usage

//- Register a component
component alert
 .alert.alert-danger
 .alert-title
 slot title
 
 slot

section
 //- Somewhere later in your template
 +alert
 slot title
 | Hello #[em world]!

 p This is an alert!

Output:

<section>
 <div class="alert alert-danger">
 <div class="alert-title">
 Hello <em>world</em>!
 </div>

 <p>This is an alert!</p>
 </div>
</section>

Default slots

component page
 header
 slot header
 | Default header

 slot

 footer
 slot footer
 | Default footer

+page
 | My page content

 slot footer
 | Custom footer

Output:

<header>
 Default header
</header>

My page content

<footer>
 Custom footer
</footer>

Parameters

Component inherit mixin behavior.

Parameters can be passed as in mixins:

component page($title)
 header
 h1=$title

 slot

 footer
 slot footer
 | Footer of #{$title} page

+page("Contact")
 | Contact us

($title becomes title if you use pug-php or js-phpize)

Output:

<header>
 <h1>
 Contact
 </h1>
</header>

Contact us

<footer>
 Footer of Contact page
</footer>

Fallback component

This package also include a function to get the first defined mixin/component among given names:

component page
 | Page component

+#{$firstComponent('customPage', 'page')}

Output:

Page component

And if customPage component is defined, it will be used instead:

component page
 | Page component

component customPage
 | CustomPage component

+#{$firstComponent('customPage', 'page')}

Output:

CustomPage component

($firstComponent becomes firstComponent if you use pug-php or js-phpize) $firstMixin is also available as an alias.