在blade中创建自定义blade html元素

Question

我有一些用 HTML 构建的经常使用的复杂 UI 元素（例如卡片、按钮组等）。为此，我想创建可重用的刀片元素。

我发现的最接近的解决方案是自定义刀片指令。

我定义了一个简单的卡片指令，如下所示：

Blade::directive('card', function ($expression) {
    list($title, $icon, $buttons) = explode(',', str_replace(["'"], '', $expression));

    $str = '<div class="card card-custom">
                         <div class="card-header">
                             <div class="card-title">
                                 <span class="card-icon">
                                     <i class="'.$icon.'"></i>
                                 </span>
                                 <h3 class="card-label">'.$title.'
                             </div>
                             <div class="card-toolbar">'.$buttons.'
                             </div>
                         </div>
                         <div class="card-body">';
    return "<?php echo '".$str."'; ? >";
});

Blade::directive('endcard', function () {
    return '</div></div>';
})

在我的刀片中我只是这样称呼它：

@card('Dashboard', 'fa fa-tachometer', $buttonsHtml)
    <div> Card content here...</div>
@endcard

哪位想要附图。

问题是我无法将任何参数作为变量传递（例如 $buttonsHtml），因为它会将其字面意思视为“$buttonsHtml”。

我还没有看到有人试图在将变量传递给自定义指令之前对其进行求值。有可能这样做吗？

如果我需要传递 $buttonsHtml 变量的实际值，那么它是没有用的，因为它是由其他函数生成的。任何人都知道一种解决方法，甚至可以替代使用自定义指令吗？

Answer 1

您可以使用Blade 组件来创建可重用的 html 元素，并且因为您的card元素非常简单，所以我将使用匿名组件。

创建以下文件：

“资源/视图/组件/card.blade.php”

@props([
'title' => '',
'icon' => '',
])

<div class="card card-custom">
    <div class="card-header">
        <div class="card-title">
            <span class="card-icon"><i class="{{ $icon }}"></i></span>
            <h3 class="card-label">{{ $title }}</h3>
        </div>
        @if(isset($toolbar))
            <div class="card-toolbar">{{ $toolbar }}</div>
        @endif
    </div>
    <div class="card-body">{{ $slot }}</div>
</div>

现在您可以在视图文件中像这样使用它：

<!-- without toolbar -->
<x-card title="Dashboard" icon="fa fa-tachometer">
    <div> Card content here...</div>
</x-card>

<!-- with toolbar -->
<x-card title="Dashboard" icon="fa fa-tachometer">
    <x-slot name="toolbar">
        {!! $buttonsHtml !!}
    </x-slot>

    <div> Card content here...</div>
</x-card>