Laravel组件描述可选

Question

操作部分$description是可选的，但当没有提供描述时，我仍然可以空<p class="mt-1 text-sm text-gray-500">...</p>，隐藏它的最好方法是什么？

节标题组件

<div class="px-4 sm:px-6">
    <h2 class="text-lg font-medium leading-6 text-gray-900">
        {{ $title }}
    </h2>
    <p class="mt-1 text-sm text-gray-500">
        {{ $description }}
    </p>
</div>

操作节组件

<div {{ $attributes->merge(['class' => 'pt-6 bg-white border sm:rounded-md sm:overflow-hidden']) }}>
    <x-section-title>
        <x-slot name="title">{{ $title }}</x-slot>
        <x-slot name="description">{{ $description ?? '' }}</x-slot>
    </x-section-title>

    <div class="flex flex-col mt-6">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                {{ $content }}
            </div>
        </div>
    </div>
</div>

Answer 1

试试这个：

// section-title.blade.php 
@props([
    'title',
    'description',
])

<div class="px-4 sm:px-6">
    <h2 class="text-lg font-medium leading-6 text-gray-900">
        {{ $title }}
    </h2>

    @if($description)
        <p class="mt-1 text-sm text-gray-500">
            {{ $description }}
        </p>
    @endif
</div>

// action-section.blade.php
<div {{ $attributes->merge(['class' => 'pt-6 bg-white border sm:rounded-md sm:overflow-hidden']) }}>
    <x-section-title :title="$title" :description="$description ?? ''"></x-section-title>

    <div class="flex flex-col mt-6">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                {{ $content }}
            </div>
        </div>
    </div>
</div>