【Laravel】Bladeテンプレートでよく使う記法

attributesを使ったcomponentファイルとclassのマージ

• $attributesは、Bladeコンポーネントで使用される特別な変数（渡された属性をまとめて使用）
• コンポーネントに渡された属性をまとめて保持するために使用されます。
• hrefやsrcなど、HTML要素に適用される属性には何でも使える
• 追加classを設定できる

コンポーネントファイル

// デフォルトのclassの定義も可能
<a {{ $attributes->merge(['class' => 'flex gap-1.5 duration-200 w-fit hover:opacity-80']) }}>
    <img class="relative top-[3px] w-[18px] h-[18px]" src="{{ asset('img/icon-arrow-circle.svg') }}" alt="">
    <span class="flex-1 text-[15px] text-teal-600 font-bold">{{ $slot }}</span>
</a>

viewファイル

// classの追加が可能
<x-link-text
    href="/hoge/"
    class="mt-5"
>
    リンクです。
</x-link-text>

複数のスロット指定

• x-lostにnameを指定することで複数のスロットを作成できる
• デフォルトのslotと併用できる

コンポーネントファイル

@props([
    'src',
    'alt',
    'title',
])

<li class="grid xl:grid-cols-2 gap-5 py-5 border-b">
    <div>
        @if(isset($tag))
            {{ $tag }}
        @endif
        <img class="xl:w-[300px] w-full aspect-video object-cover rounded mt-3" src="{{ $src }}" alt="{{ $alt }}">
    </div>
    <div class="grid gap-3 self-start">
        <p class="font-bold">{{ $title }}</p>
        {{ $slot }}
    </div>
</li>

viewファイル

<x-owner.list>
    @foreach($latestPets as $pet)
        <x-owner.item
            src="{{ asset('storage/' . $pet->pet_image1) }}"
            alt="{{ $pet->title }}"
            title="{{ $pet->title }}"
        >
            <x-slot name="tag">
                @if($pet->public_flag === 0)
                    <x-owner.tag class="bg-amber-500">公開中</x-owner.tag>
                @else
                    <x-owner.tag class="bg-gray-400">非公開</x-owner.tag>
                @endif
            </x-slot>
            <x-owner.link-list>
                <x-link-text
                    href="/owner/shop/{{ $pet->shop_id }}/pet/{{ $pet->id }}"
                >
                    ●●の編集
                </x-link-text>
                <x-link-text
                    href="/owner/shop/{{ $pet->shop_id }}/pet"
                >
                    ●●一覧
                </x-link-text>
            </x-owner.link-list>
        </x-owner.item>
    @endforeach
</x-owner.list>