@props(['user', 'livewire'])
<li class="list-group-item" x-data="{ show: false}" @close.window="show = false" x-cloak>
<div class="row" x-show="!show" x-transition:enter="fade">
{{ $element }}
<div class="col-4 col-md-4">
<a href="#" class="float-right" x-on:click="show = true">Edit</a>
</div>
</div>
{{ $livewire }}
</li>
//
<ul class="list-group list-group-unbordered mb-3">
<x-profile.element :user="$user">
<x-slot name="element">
<div class="col-md-12">
<b>Email</b>
</div>
<div class="col-8 col-md-8">
{{ $user->email }}
</div>
</x-slot>
<x-slot name="livewire">
<livewire:profile.update-email />
</x-slot>
</x-profile.element>
//
</ul>
//
Additional resources on blade components:
-
Povilas Korop | www.youtube.com
Published on
-
Povilas Korop | www.youtube.com
Published on
-
Blade components for your layout
Article
Marcel Pociot | beyondco.de
Published on
-
Article
Eric The Coder | dev.to
Published on