Emmet like Abbreviation to generate and wrap Laravel Blade Component with markup

v1.2.0 2023-03-31 08:14 UTC

This package is auto-updated.

Last update: 2024-04-30 00:28:32 UTC


Emmet like Abbreviation to generate and wrap Laravel Blade Component with markup

Latest Version on Packagist Total Downloads GitHub Tests Action Status Open Issues License

example static markup example blade component

🌈 Features

  • 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 )

🛸 Compatibility

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 🔴

📥 Installation

composer require aqua/blade-emerald

📖 Usage

💡 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

🏷️ Generate static nested markup

<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>

🏷️ Wrap some content

<x-markup make="div.col>div.alert.alert-success[role=alert]">
    <strong>Success !</strong> give it a click if you like.
produced html
<div class="col">
    <div class="alert alert-success" role="alert">
        <strong>Success !</strong> give it a click if you like.

🏷️ Accept abbreviation in your Blade Component

this feature doesn't support Anonymous Components

  1. use Aqua\Emerald\Traits\Markup trait in your Component Class
class YourComponent extends Component {
    use Markup;
  1. the Markup trait assumes the prop name to be wrap, so lets add this as a class property & instantiate
public function __construct(public $wrap) {...} // using php 8.0 constructor property promotion

read more about constructor property promotion

  1. accept abbreviation
<x-your-component wrap=" > .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 -->
  1. accept abbreviation using prop of your choise to customize the prop name that receives the abbreviation create a static property $wrapby and 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-body.text-danger" />

🧰 Useful Examples

Bootstrap grid
<x-markup make="div.container > div.row > div.col-md-6">
    <p>Hello world!</p>
<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>
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>[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>
    <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
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" />
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] [] > li[x-text=color.label]" />

equivalent to

<ul x-data="{ colors: ...}">
    <template x-for="color in colors" :key="">
        <li x-text="color.label"></li>

📚 Abbreviation Guide

checkout spatie/html-element to get more idea.

Syntax Example Description
#id p#foo ID attribute
.class 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

📅 Changelog

Please see CHANGELOG for more information on what has changed recently.

🏆 Credits

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.

🎫 License

The MIT License (MIT). Please see License File for more information.