aqua/blade-emerald

Emmet 类似缩写，用于生成并包装 Laravel Blade 组件的标记

维护者

详细信息

github.com/aqquaa/blade-emerald

主页

源代码

问题

安装次数: 59

依赖者: 0

建议者: 0

安全性: 0

星星: 32

关注者: 2

分支: 3

开放问题: 0

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

Requires

Requires (Dev)

MIT f0d6b450acc36c2fd4a0a7f7e483d0cc579c5754

  • Sourav Rakshit <hello.woop@itsrav.dev>

htmllaravelBlade componentBlade HTML Markup Generate

This package is auto-updated.

Last update: 2024-09-30 01:46:37 UTC

README

Emmet 类似缩写，用于生成和包装 Laravel Blade 组件 的标记

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

example static markup example blade component

🌈 特点

  • 通过包提供的组件在 Blade 文件中生成 HTML： <x-markup make="div.col>span#alert">
  • Emmet 风格语法以生成嵌套标记
  • 用标记包装任何内容/其他组件
  • 让任何 Blade 组件接受缩写以用标记包装自身（ 匿名组件不适用 ）

🛸 兼容性

📥 安装

composer require aqua/blade-emerald

📖 使用方法

💡 该包提供了一个 Blade 组件 <x-emerald-markup />，此组件可以使用 <x-markup ...> 作为别名。该组件支持一个名为 make 的属性，接受缩写

🏷️ 生成静态嵌套标记

<x-markup make="div.card[style='color:green;'] > div.card-body#box" />

生成的 html

<div class="card" style="color:green;">
    <div class="card-body" id="box"></div>
</div>

🏷️ 包装一些内容

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

🏷️ 在您的 Blade 组件中接受缩写

此功能不支持 匿名组件

  1. 在您的组件类中使用 Aqua\Emerald\Traits\Markup 特性
class YourComponent extends Component {
    use Markup;
    ...
  1. Markup 特性假设属性名为 wrap，因此请将其作为类属性添加并实例化
public function __construct(public $wrap) {...} // using php 8.0 constructor property promotion

了解有关构造函数属性提升的更多信息

  1. 接受缩写
<x-your-component wrap=".card.bg-dark.pt-2 > .card-body.text-danger" />
生成的 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 -->
    </div>
</div>
  1. 使用您选择的属性接受缩写以自定义接收缩写的属性名，创建一个静态属性 $wrapby 并将其值设置为您的属性名
class YourComponent extends Component {
    use Markup;

    protected static $wrapby = 'markup'; 👈

    public function __construct(public $markup, ...) {
                                        👆
    }
    ...
<x-your-component markup=".card.bg-dark.pt-2 > .card-body.text-danger" />
                   👆

🧰 有用示例

Bootstrap 网格 
<x-markup make="div.container > div.row > div.col-md-6">
    <p>Hello world!</p>
</x-markup>
面包屑 
<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>
</x-markup>
Bootstrap 卡片带链接 
<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>a.nav-link.active[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>
    </x-markup>
    <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </div>
</x-markup>
Bootstrap 表单组 
<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" />
</x-markup>
自闭合标签 
<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] [:key=color.id] > li[x-text=color.label]" />
</ul>

等同于

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

📚 缩写指南

查看 spatie/html-element 获取更多想法。

📅 更新日志

请参阅 更新日志 了解最近的变化信息。

🏆 致谢

实际上，此包是 spatie/html-element 的包装器，所有艰苦的工作都由 Spatie 团队完成，因此他们应得到所有赞誉。我所做的一切就是使其与 Laravel Blade 组件兼容。

🎫 许可证

MIT 许可证 (MIT)。有关更多信息，请参阅 许可证文件。