Використовуйте скорочення у стилі Emmet у компонентах Blade

Laravel Blade Emerald надає емметоподібні скорочення для генерації та обгортання компонентів Laravel Blade розміткою. Він працює за допомогою компонента <x-markup/> Blade, який приймає абревіатуру Emmet:

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

Цей пакет дозволяє легко та зручно досягти вкладеної розмітки за допомогою коду в стилі Emmet і навіть навколо існуючого вмісту або інших компонентів. Ви також можете використовувати рису, надану Markup цим пакетом, щоб обернути інші компоненти Blade за допомогою синтаксису Emmet:Тепер ви можете використовувати скорочення, які обернуть ваш компонент:

use Aqua\Emerald\Traits\Markup;
 
class YourComponent extends Component
{
    use Markup;
 
    public function __construct(public $wrap) {...}
 
    // ...
}

<x-your-component wrap=".card.bg-dark.pt-2 > .card-body.text-danger" />

Перегляньте корисні приклади для подальшого натхнення того, як ви можете використовувати цей пакет із Bootstrap, Alpine або будь-якими іншими потребами виведення HTML.

Ви можете дізнатися більше про цей пакет, отримати повні інструкції з встановлення та переглянути вихідний код на GitHub.