README

此软件包添加了我们在开发 Rapidez 期间在 Laravel 中发现的所需的 blade 指令。例如 @slots，它允许您定义可选插槽，以便您的 attributes->merge() 总是正常工作。或者 @includeFirstSafe，它的工作方式与 @includeFirst 相同，但如果找不到模板则不会抛出错误。

安装

composer require rapidez/blade-directives

组件

x-tag

我们知道，这是一个组件，而不是指令，但这是一个可能非常有用的组件，所以我们添加了它。这是 Vue 组件的 Blade 版本，类似于动态 Vue 组件

用法

<x-tag is="span" class="font-bold">
    Something
</x-tag>

这将导致

<span class="font-bold">
    Something
</span>

指令

@attributes

@attributes blade 指令允许您使用数组传递 HTML 元素的属性。在功能上与 blade 组件的 $attributes 相同，但您可以在 blade 组件外部使用它！

用法

示例

<input @attributes(['type' => 'text', 'id' => 'test', 'name' => 'some_name'])/>

这将导致

<input type="text" id="test" name="some_name" />

@includeFirstSafe

@includeFirstSafe blade 指令的工作方式与 @includeFirst 相同，但如果所有模板都不存在，则不会抛出错误。在生产模式之外，它将关于缺失模板发出警报。

用法

示例

@includeFirstSafe(['custom.admin', 'admin'], ['status' => 'complete'])

@markdown

您可以使用 @markdown 指令将 markdown 转换为 html。基本上，它就是 {!! Str::markdown($text) !!}，但以指令形式。

用法

@markdown($text)

@return

@return blade 指令简单地停止对当前模板的进一步处理

用法

示例

@return

@slotdefault

当您有一个可选插槽时，此指令为您提供了一种更简洁的方式来定义回退。通常您会这样做

@if ($slot->isEmpty())
    This is default content if the slot is empty.
@else
    {{ $slot }}
@endif

用法

@slotdefault('slot')
    This is default content if the slot is empty.
@endslotdefault

@slots

@slots blade 指令用于 blade 组件中。它用于定义可选的命名插槽，如果未传递，则将创建这些插槽。当命名插槽可能不会始终传递但您想使用此命名插槽的 attributes 时，非常有用。

用法

在您的 blade 组件中

@slots(['optionalSlot', 'anotherSlot' => ['contents' => 'dummy text', 'attributes' => ['class' => 'bg-red-500']]])

<div {{ $attributes }}>
    {{ $slot }}
    <div {{ $optionalSlot->attributes }}>{{ $optionalSlot }}</div>
    <div {{ $anotherSlot->attributes->class('text-black') }}>{{ $anotherSlot }}</div>
</div>

如果您不输入任何内容，只加载组件而不传递任何命名插槽，则它将如下所示

<div >
    <div ></div>
    <div class="bg-red-500 text-black">dummy text</div>
</div>

但如果您传递了命名插槽，它将看起来像这样

<x-component>
    Regular slot text
    <x-slot:optionalSlot>Optional content</x-slot:optionalSlot>
    <x-slot:anotherSlot class="text-lg">Optional content</x-slot:anotherSlot>
</x-component>

<div >
    Regular slot text
    <div >Optional content</div>
    <div class="text-lg text-black">Optional content</div>
</div>

如您所见，它已覆盖了可选插槽的类，但没有覆盖 attributes->class()

如果您只想更改文本而不更改属性，也可以将它们作为属性传递。

<x-component optionalSlot="Optional content" anotherSlot="Optional content">
    Regular slot text
</x-component>

<div >
    Regular slot text
    <div >Optional content</div>
    <div class="bg-red-500 text-black">Optional content</div>
</div>

辅助函数

optionalDeep

您听说过 optional() 吗？这是在任何深度下工作的超级充电版本！它确保任何缺失的键都不会破坏您的代码，特别是当将 Statamic 与 Blade 混合使用时非常有帮助。

用法

它将自动返回值，当将其转换为字符串时，因此您可以立即输出其值。如果您想要获取值，请使用 get 方法。如果链中的任何地方值或键不存在，它将返回 null。

{{ optionalDeep($object)->undefinedKey->anotherUndefinedKey }}
{{ optionalDeep($object)->header->usp->link->value() }}
@if(optionalDeep($object)->header->usp->link->value()->isset())
@if(optionalDeep($object)->header->usp->link->value()->get() === 'test')

提示

OptionalDeep 类实现了 Macroable，允许您使用自己的函数扩展它！

许可

GNU 通用公共许可证 v3。有关更多信息，请参阅许可文件。

rapidez / blade-directives

维护者

详情