Cara menambahkan 2 layout app pada livewire laravel

0

Sebelumnya saya menceritakan sedikit pengalaman menggunakan Livewire pada project Laravel saya. Pada project saya tersebut menggunakan 2 layout, layout 1 yaitu bawaan dari laravel saya gunakan sebagai tampilan User, sedangkan Layout 2 saya gunakan untuk tampilan Admin, apabila anda menggunakan Livewire, anda harus melakukan salah satu konfigurasi untuk mengaktifkan layout 2 supaya pada saat file Blade anda menggunakan Layout 2 tidak error atau tidak beralih ke Layout 1. Untuk mengaktifkannya ikut cara dibawah ini 




CARA PERTAMA




1.Klik pada folder Vendor


2.Lalu klik folder Livewire


3.klik pada folder Config dan klik file livewire.php


4.Lalu cari layout pada file livewire.php seperti gambar dibawah ini


5.Dan tambahkan layout baru seperti gambar dibawah ini


6.Selesai, untuk lebih lengkapnya anda bisa mengunjungi  Documentasi website Livewire klik disini



    

CARA KEDUA

  1. Buat dua file layout app pada direktori resources/views/layouts dengan nama yang berbeda, misalnya app1.blade.php dan app2.blade.php.

  2. Buka file app/Http/Livewire/Component.php, lalu tambahkan baris berikut di bagian atas:


use Layouts\App1;
use Layouts\App2;
  1. Tambahkan kode berikut pada method render() untuk menentukan layout mana yang akan digunakan:
public function render() 
   {
      
if ($this->layout == 'app1')
            {
                return view('livewire.my-component')->layout('layouts.app1');
             }
       elseif ($
this->layout == 'app2')
             {
                 
return view('livewire.my-component')->layout('layouts.app2');
             }
 }
  1. Kemudian, pada method mount(), tambahkan parameter $layout yang akan menentukan layout yang akan digunakan:
controller
public function mount($layout)
    {
      $this->layout = $layout;
    }
  1. Terakhir, buatlah dua link atau tombol yang akan mengarahkan ke halaman dengan layout yang berbeda. Contohnya:

<a href="{{ route('my-component', ['layout' => 'app1']) }}">App 1</a>
<a href="{{ route('my-component', ['layout' => 'app2']) }}">App 2</a>

Dengan cara ini, Anda dapat menambahkan dua layout app pada Livewire Laravel dan menampilkan tampilan yang berbeda-beda pada kedua layout tersebut.






Posting Komentar

0Komentar
Posting Komentar (0)