Używaj skrótów w stylu Emmeta w komponentach ostrzy

Laravel Blade Emerald zapewnia skróty podobne do Emmeta do generowania i owijania komponentów Laravel Blade znacznikami. Działa przy użyciu składnika <x-markup/> Blade, który akceptuje skrót 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>

Ten pakiet ułatwia i ułatwia osiągnięcie zagnieżdżonych znaczników za pomocą kodu w stylu Emmet, a nawet wokół istniejącej zawartości lub innych komponentów. Możesz także użyć cechy dostarczonej przez ten pakiet, aby opakować inne komponenty Blade przy użyciu składni Emmet:Teraz możesz użyć Markup skrótów, które będą otaczać twój komponent:

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

Sprawdź przydatne przykłady, aby uzyskać dalszą inspirację na temat tego, jak możesz używać tego pakietu z Bootstrap, Alpine lub innymi potrzebami wyjściowymi HTML.

Możesz dowiedzieć się więcej o tym pakiecie, uzyskać pełne instrukcje instalacji i wyświetlić kod źródłowy w witrynie GitHub.You can learn more about this package, get full installation instructions, and view the source code on GitHub.