Components and slots in Laravel - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include a Blade component named 'alert'.

Laravel

<x-[1] />

Drag options to blanks, or click blank then click option'

Aheader

Blayout

Calert

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the 'x-' prefix before the component name.

Using a component name that does not exist.

The Blade component is included using the syntax where 'alert' is the component name.

2fill in blank

medium

Complete the code to pass a 'type' attribute with value 'error' to the 'alert' component.

Laravel

<x-alert [1]="error" />

Drag options to blanks, or click blank then click option'

Atype

Bclass

Cid

Dslot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'class' instead of 'type' for the attribute.

Trying to pass data inside the slot instead of as an attribute.

Attributes are passed to components as HTML attributes. Here, 'type' is the attribute name.

3fill in blank

hard

Fix the error in the component slot usage by completing the code to define a slot named 'title'.

Laravel

<x-alert>
    <x-slot name="[1]">
        Error!
    </x-slot>
</x-alert>

Drag options to blanks, or click blank then click option'

Aheader

Btitle

Cfooter

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a slot name that the component does not recognize.

Forgetting to close the tag properly.

Slots are named sections inside components. The 'title' slot is commonly used for headings.

4fill in blank

hard

Fill both blanks to pass a variable named 'message' and display it inside the default slot.

Laravel

<x-alert [1]="[2]">
    {{ $message }}
</x-alert>

Drag options to blanks, or click blank then click option'

Atype

Bmessage

Cslot

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'slot' or 'content' as attribute names instead of 'message'.

Passing the variable name incorrectly without quotes.

The attribute 'message' is used to pass the variable 'message' to the component, which can then display it inside the default slot.

5fill in blank

hard

Fill all three blanks to create a component with a named slot 'footer' and pass a 'color' attribute with value 'red'.

Laravel

<x-alert [1]="[2]">
    <x-slot name="[3]">
        Footer content
    </x-slot>
</x-alert>

Drag options to blanks, or click blank then click option'

Acolor

Bred

Cfooter

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect attribute names like 'header' instead of 'color'.

Misnaming the slot or forgetting the 'name' attribute.

The 'color' attribute is set to 'red', and the named slot 'footer' is defined inside the component.