linkorb/custom-element

自定义元素

维护者

详细信息

github.com/linkorb/custom-element

主页

源代码

问题

安装: 66

依赖项: 0

建议者: 0

安全性: 0

星标: 0

关注者: 3

分支: 0

开放问题: 0

v1.0.0 2021-11-14 13:56 UTC

Requires

  • php: >=7.4.0

MIT 0c77fe545026225326c6c6deefb00859d307e856

  • LinkORB Engineering <engineering.woop@linkorb.com>

phpweb-componentslinkorbSSRcustom-element

This package is auto-updated.

Last update: 2024-09-14 19:58:38 UTC

README

此库允许您在（Twig）模板中定义自定义元素。

将其视为轻量级SSR（服务器端渲染）Web组件。

例如，您可以创建一个新的元素，如 <Avatar username="alice" imageUrl="https://example.web/alice.webp" bio="Hello world" />

然后您定义一个twig模板 elements/Avatar.html.twig，例如以下内容

<div class="card avatar">
  <div class="card-body">
    <h1>{{username}}</h1>
    {% if imageUrl is defined %}
      <img src="{{ imageUrl }}" class="avatar-image" />
    {% endif %}
    {% if bio is defined %}
      <small>{{ bio }}</small>
    {% endif %}
  </div>
</div>

现在您可以使用自定义元素模板渲染您的自定义元素。模板会接收每个指定属性的变量。

自定义元素仅当它们以大写字母开头时才会被渲染（以区分标准元素和自定义元素）

用法

Symfony

将以下内容添加到您的 services.yaml 以注册渲染器和twig扩展

services:
    LinkORB\Component\CustomElement\Twig\CustomElementExtension:
        tags: ['twig.extension']
    LinkORB\Component\CustomElement\CustomElementRenderer: ~

渲染器

您可以将任何包含自定义元素的原始HTML转换为渲染后的HTML输出，如下所示

$renderer = new Renderer($twig);
$html = $renderer->render($htmlWithCustomElements);

Twig扩展

您可以使用过滤器从任何Twig模板渲染自定义元素

<h1>Example</h1
{{ html|custom_element_render|raw }}

许可证

MIT。请参阅许可证文件以获取详细信息。

由LinkORB工程技术团队提供


在linkorb.com/engineering查看我们的其他项目。

顺便说一下，我们在招聘！