Emmet like Abbreviation to generate and wrap Laravel Blade Component with markup
- Generate HTML in a Blade file via package provided component:
<x-markup make="div.col>span#alert"> - Emmet style syntax to produce nested markup
- Wrap around any content / other component with markup
- Make any Blade Component accept abbreviation to wrap itself with markup ( doesn't work for Anonymous Components )
| Package Version | Laravel version | PHP version | Compatible |
|---|---|---|---|
| ^1.2 | 10.* | 8.1 - 8.2 | 🟢 |
| ^1.0 | 9.* | 8.0 - 8.1 | 🟢 |
| ^1.0 | 8.* | 7.3 - 8.0 | 🟢 |
| 7.* | 7.3 - 7.4 | 🔴 |
composer require aqua/blade-emerald💡 The package provides a Blade Component <x-emerald-markup />, This component can be used like <x-markup ...> as an alias.
The component support one prop named make which accept the abbreviation
<x-markup make="div.card[style='color:green;'] > div.card-body#box" />produced html
<div class="card" style="color:green;">
<div class="card-body" id="box"></div>
</div><x-markup make="div.col>div.alert.alert-success[role=alert]">
<strong>Success !</strong> give it a click if you like.
</x-markup>produced html
<div class="col">
<div class="alert alert-success" role="alert">
<strong>Success !</strong> give it a click if you like.
</div>
</div>this feature doesn't support Anonymous Components
- use
Aqua\Emerald\Traits\Markuptrait in your Component Class
class YourComponent extends Component {
use Markup;
...- the
Markuptrait assumes the prop name to bewrap, so lets add this as a class property & instantiate
public function __construct(public $wrap) {...} // using php 8.0 constructor property promotionread more about constructor property promotion
- accept abbreviation
<x-your-component wrap=".card.bg-dark.pt-2 > .card-body.text-danger" />produced html
<div class="card bg-dark pt-2">
<div class="card-body text-danger">
<!-- actual content of your-component -->
<p>Laravel... The PHP Framework for Web Artisans</p>
<!-- actual content of your-component -->
</div>
</div>- accept abbreviation using prop of your choise
to customize the prop name that receives the abbreviation create a static property
$wrapbyand set its value to your prop name
class YourComponent extends Component {
use Markup;
protected static $wrapby = 'markup'; 👈
public function __construct(public $markup, ...) {
👆
}
...<x-your-component markup=".card.bg-dark.pt-2 > .card-body.text-danger" />
👆Bootstrap grid
<x-markup make="div.container > div.row > div.col-md-6">
<p>Hello world!</p>
</x-markup>Breadcrumb
<x-markup make="nav[aria-label=breadcrumb]>ol.breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</x-markup>Bootstrap card with links
<x-markup make="div.card.text-center">
<x-markup make="div.card-header>ul.nav.nav-pills.card-header-pills">
<x-markup make="li.nav-item>a.nav-link.active[href=#]">Active</x-markup>
<x-markup make="li.nav-item>a.nav-link[href=#]">Link</x-markup>
<x-markup make="li.nav-item>a.nav-link.disabled[href=# tabindex=-1 aria-disabled=true]">Disabled</x-markup>
</x-markup>
<div class="card-body">
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</x-markup>Bootstrap form-group
<x-markup make="div.form-group>div.mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" />
<x-markup make="div>div.#emailHelp.form-text>span.text-danger.validation-msg" />
</x-markup>Self closing tag
<x-markup make="img#profile[src=/avatar.jpg width=80]" />Alpine x-for
<ul x-data="{ colors: [{ id: 1, label: 'Green' }, ...] }">
<x-markup make="template[x-for=color in colors] [:key=color.id] > li[x-text=color.label]" />
</ul>equivalent to
<ul x-data="{ colors: ...}">
<template x-for="color in colors" :key="color.id">
<li x-text="color.label"></li>
</template>
</ul>checkout spatie/html-element to get more idea.
| Syntax | Example | Description |
|---|---|---|
#id |
p#foo |
ID attribute |
.class |
p.foo |
Class attribute |
> |
div.row>div.col |
Nesting with child |
[style='color:green;'] |
div[style='color:green;'] |
Single attribute |
[title=Hello world][data-foo=bar] |
Multiple attributes |
Please see CHANGELOG for more information on what has changed recently.
This package is actually a wrapper around spatie/html-element, all the hard work has been done by Team Spatie so they deserve all the credits. All I did is make it work with Laravel Blade Components.
The MIT License (MIT). Please see License File for more information.