Named slots

I am a bit confused about named slots. I tried this as an example : https://spatie.be/docs/laravel-blade-x/v2/basic-usage/using-slots

        <x-dropdown trigger="test-trigger">
            Slot Text
           <slot name="sidebar">
                <ul>
                    <li>Home</li>
                    <li>Contact</li>
                </ul>
            </slot>
        </x-dropdown>

And in the component:

@props(['trigger'])

<div>
    {{ $trigger }}
</div>

<div class="flex">
    <div class="w-1/3">
        {{ $sidebar }}
    </div>
    <div class="w-2/3">
        {!! $slot !!}
    </div>
</div>

But I get Undefined variable: sidebar (View: /Users/username//www/laravel/blog/resources/views/components/dropdown.blade.php)

Im on Laravel 7.11 which I had downloaded for testing last year.

lemmon

4 years ago

Best Answer

Level 28

@anjanesh

<x-slot name="sidebar">
     <ul>
           <li>Home</li>
            <li>Contact</li>
      </ul>
 </x-slot>

anjanesh

4 years ago

Level 5

Thank you - that worked. But how is the example stating <slot name="sidebar"> ?

lemmon

4 years ago

Level 28

the component is named x-dropdown

'Slot text' will be rendered in the default {{ $slot }}

and everything inside of the slot named sidebar will be rendered in the {{ $sidebar }}

the default slot is implied inside the x-dropdown component, but the named slot is explicitly defined

lemmon

4 years ago

Level 28

Oh I see in the example it may be a typo possibly. :)

1 like

Please or to participate in this conversation.