在 Blade 组件中使用 Emmet 风格的缩写

Laravel Blade Emerald 提供了类似 Emmet 的缩写功能，用于使用标记生成和包装 Laravel Blade 组件。它通过使用一个接受 Emmet 缩写的 `<x-markup/>` Blade 组件来实现。

<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` 特性使用 Emmet 语法包装其他 Blade 组件。

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 上了解更多关于这个包的信息，获取完整的安装说明，并查看 源代码。