phug / component
Extension for pug-php and phug to use components in templates
Fund package maintenance!
kylekatarnls
Open Collective
Tidelift
Installs: 27 759
Dependents: 3
Suggesters: 0
Security: 0
Stars: 4
Watchers: 4
Forks: 0
Language:HTML
Requires
- php: >=7.2
- phug/phug: ^1.7.2
Requires (Dev)
- machy8/xhtml-formatter: ^1.0
- phpunit/phpunit: ^8.5
- pug-php/pug: ^3.3
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.