README

Antlers Components 是一个 Statamic 插件，它使创建独立的、可重用的 Antlers 部分变得容易，并通过使用熟悉的语法轻松集成现有的 Blade 和 Livewire 组件。

安装

您可以使用 composer 安装 Antlers Components

composer require stillat/antlers-components

要求

Antlers Components 需要 PHP 8.1 或更高版本

Statamic 版本 3.4.* 或更高
Laravel 9.36 或更高

此包提供 Livewire 组件的熟悉语法，并将其编译为本包提供的 Antlers 标签

https://statamic.com/addons/jonassiewertsen/livewire

为了使用 Livewire 语法，您还需要使用以下命令安装它

composer require jonassiewertsen/statamic-livewire

有关编译错误以外的 Livewire 功能的支持/问题报告，请使用以下 GitHub 链接

https://github.com/jonassiewertsen/statamic-livewire

使用 Blade 组件

您可以在 Antlers 模板中使用您熟悉的语法使用 Blade 组件。

例如，要包含一个 card Blade 组件，我们可以使用 <x-card /> 语法。此包支持 Blade 组件插槽；您可以在插槽中使用 Antlers

{{ collection:articles }}
    <x-card class="shadow-sm">
        <x-slot:heading class="font-bold">
            {{ title }}
        </x-slot>
    
        {{ content | safe_truncate(120) }}
    
        <x-slot:footer class="text-sm">
            ...
        </x-slot>
    </x-card>
{{ /collection:articles }}

在参数值中使用 Antlers 是可接受的。

Livewire 组件

我们可以使用 <livewire /> 语法在 Antlers 模板中集成现有的 Livewire 组件，如下所示

{{ collection:articles }}
    <livewire:counter :start="index" />
{{ /collection:articles }}

在参数值中使用 Antlers 是可接受的。

支持的参数类型

当将组件标签编译为 Antlers 时，此包支持以下参数类型

简写变量:

{{ title = 'The title'; }}

<x-alert :$title />

变量引用:

{{ title = 'The title'; }}

<x-alert :title="title" />

名称/值:

{{ title = 'The title'; }}

<x-alert title="title" />

属性:

<x-editor readonly />

Antlers 组件

此包还支持 Antlers "组件" 的概念，这实际上是在部分之上的一些语法糖（带有一些特殊行为）。

例如，我们可以使用此库包含一个名为 partial-name.antlers.html 的部分，如下所示

<a-partial-name :$title />

非常重要：当使用此语法时，部分不会继承它们被包含时的作用域（除了通用的级联）。这意味着如果我们想将当前数据提供给我们的部分，我们必须通过参数显式传递它。

使用此语法时，插槽的行为也有所不同，更接近匿名 Blade 组件。

让我们考虑一个名为 _card.antlers.html 的 Antlers 部分作为例子

<div {{ attributes.class(['border']) }}>
    <h1 {{ title.attributes.class(['border']) }}>
        {{ title }}
    </h1>
    
    {{ slot }}
    
    <footer {{ footer.attributes.class(['text-gray-700']) }}>
        {{ footer }}
    </footer>
</div>

我们可以在主模板中这样渲染此 Antlers 部分如下

{{ collection:articles }}
    <a-card :$title :$content>
        <a:slot:title>{{ title }}</a:slot:title>
        <a:slot:footer>...</a:slot:footer>

        {{ content | safe_truncate(120) }}
    </a-card>
{{ /collection:articles }}

注意：我们必须通过参数显式提供当前文章的标题和内容值，以便允许当前文章的值。否则，它将默认为当前页面的值。

当使用此语法时，我们不需要在部分内部使用 slot: 前缀命名插槽。此外，我们还可以访问一个属性包。传递给命名插槽的参数也将可用在部分内部

{{ collection:articles }}
    <a-card :$title :$content>
        <a:slot:title class="custom title classes">{{ title }}</a:slot:title>
        <a:slot:footer>...</a:slot:footer>

        {{ content | safe_truncate(120) }}
    </a-card>
{{ /collection:articles }}

Nesting Antlers Component Partials

我们还可以通过在其他组件中包含它们来嵌套部分组件。就像常规组件一样，我们必须指定我们想要传递给嵌套组件的值

<div>
    <a-child-partial :$title />
</div>

我们可以使用 __is_nested 变量检查我们是否在嵌套/子组件内部

{{ if __is_nested }}
    I am a nested partial.
{{ else }}
    I am not nested.
{{ /if }}

我们还可以通过使用 __depth 变量来查看我们的嵌套深度

The current nested partial depth is: {{ __depth }}.

最后，如果我们通过引用 __parent 变量进行嵌套，我们就可以访问父部分的数据

{{ __parent.title }}

如果那个父级还有一个父级，我们就可以继续向上查找

{{ __parent.__parent.title }}

许可证

此插件是开源软件，采用 MIT 许可证许可。

stillat / antlers-components

维护者

详情