README

HtmlElement

HtmlElement 是一个库，旨在使动态 HTML 渲染更加易于管理。语法基于 Hyperscript，并添加了一些 Emmet 风格的语法糖。

元素使用静态 HtmlElement::render 方法（我建议将其包装在一个普通函数中以增强可读性）进行渲染。

el('div.container > div.row > div.col-md-6',
    el('a', ['href' => '#'], 'Hello world!')
);

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <a href="#">Hello world!</a>
    </div>
  </div>
</div>

支持我们

我们投入了大量资源来创建一流的开放源代码包。您可以通过购买我们的付费产品之一来支持我们。

我们非常感谢您从家乡寄给我们明信片，说明您正在使用我们的哪些包。您可以在我们的联系页面找到我们的地址。我们将所有收到的明信片发布在我们的虚拟明信片墙上。

明信片软件

您可以使用此包（它是 MIT 许可），但如果它进入您的生产环境，您需要从您的家乡寄给我们一张明信片，说明您正在使用我们的哪些包。

我们的地址是：Spatie，Kruikstraat 22，2018 安特卫普，比利时。

最好的明信片将被发布在我们的网站上开源页面。

用法

我建议将一个 el 函数添加到您的应用程序中，以提高静态方法的可读性。

function el(string $tag, $attributes = null, $content = null) : string
{
    return \Spatie\HtmlElement\HtmlElement::render($tag, $attributes, $content);
}

示例

空标签

el('div');

<div></div>

带文本内容的普通标签

el('p', 'Hello world!');

<p>Hello world!</p>

带属性的标签

el('p', ['style' => 'color: red;'], 'Hello world!');

<p style="color: red;">Hello world!</p>

以 emmet 风格设置 ID 的标签

el('p#introduction', 'Hello world!');

<p id="introduction">Hello world!</p>

带 emmet 风格 ID 和类的标签

el('p#introduction.red', 'Hello world!');

<p id="introduction" class="red">Hello world!</p>

带 emmet 风格属性的标签

el('a[href=#][title=Back to top]', 'Back to top');

<a href="#" title="Back to top">Back to top</a>

更复杂的 emmet 风格缩写

el('div.container > div.row > div.col-md-6', 'Hello world!');

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Hello world!
    </div>
  </div>
</div>

对隐式标签名称的有限支持（仅限 div）

el('.container > .row > .col-md-6', 'Hello world!');

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Hello world!
    </div>
  </div>
</div>

手动嵌套的标签

el('div', ['class' => 'container'],
    el('nav', ['aria-role' => 'navigation'], '...')
);

<div class="container">
  <nav aria-role="navigation">...</nav>
</div>

多个子元素

el('ul', [el('li'), el('li')]);

<ul>
  <li></li>
  <li></li>
</ul>

自闭合标签

el('img[src=/background.jpg]');

<img src="background.jpg">

el('img', ['src' => '/background.jpg'], '');

<img src="background.jpg">

参数

el 函数的行为取决于传入参数的数量。

`el(string $tag) : string`

当传递一个参数时，仅渲染一个标签。

el('p');

<p></p>

`el(string $tag, string|array $contents) : string`

当传递两个参数时，它们分别代表一个标签及其内容。

字符串示例

el('p', 'Hello world!');

<p>Hello world!</p>

数组示例

el('ul', [el('li'), el('li')]);

<ul>
  <li></li>
  <li></li>
</ul>

`el(string $tag, array $attributes, string|array $contents) : string`

当传递三个参数时，第一个将是标签名称，第二个是属性数组，第三个是字符串或内容数组。

el('div', ['class' => 'container'],
    el('nav', ['aria-role' => 'navigation'], '...')
);

<div>
  <nav aria-role="navigation">...</nav>
</div>

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

测试

$ composer test

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全

如果您发现了关于安全性的错误，请通过电子邮件发送至 security@spatie.be，而不是使用问题跟踪器。

致谢

关于Spatie

Spatie 是一家位于比利时安特卫普的网页设计公司。您可以在我们的网站上找到我们所有开源项目的概述在这里。

许可证

MIT 许可证（MIT）。请参阅许可证文件了解更多信息。

spatie / html-element

维护者

详细信息