[Laravel 扩展推荐] Blade Emerald 在模板中提供类似于 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>

{{-- 生成的 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 上的源代码，来了解有关此软件包的更多信息，获取完整的安装说明。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://laravel-news.com/laravel-blade-e...

译文地址：https://learnku.com/laravel/t/65827