Реалізація завжди відкритого підменю в Laravel за допомогою Livewire Volt та Mary UI

3 Березня 2024 в 02:02 32

У розробці веб-додатків на Laravel з використанням Livewire Volt та Mary UI часто виникає потреба створення інтерактивних елементів інтерфейсу, як-от меню з підменю, що розгортаються. Однак, може знадобитися, аби певні підменю були розгорнуті за замовчуванням, незалежно від взаємодії користувача зі сторінкою. Ця стаття детально розгляне, як можна реалізувати таку поведінку, використовуючи можливості Livewire Volt та компонентний підхід Mary UI.

Перш за все, важливо зрозуміти, як працюють компоненти в Livewire та як вони інтегруються з Laravel Blade темплейтами. Livewire дозволяє створювати динамічні компоненти PHP, які ведуть себе як SPA (Single Page Application), забезпечуючи швидке відображення змін без перезавантаження сторінки. Mary UI, з іншого боку, є набором готових до використання Blade компонентів, які можуть бути легко інтегровані в ваш Laravel проект, додаючи елегантні елементи інтерфейсу без зайвих зусиль.

Створення компонента підменю

Для реалізації завжди відкритого підменю, перше, що потрібно зробити – це створити компонент підменю з використанням Mary UI. Допустимо, ви хочете мати підменю для розділу налаштувань, що включає пункти меню для різних параметрів конфігурації.

&lt;x-menu-sub title="Налаштування" icon="o-cog-6-tooth" :expand="true"&gt;
    &lt;x-menu-item title="Профіль" icon="o-user" link="/settings/profile" /&gt;
    &lt;x-menu-item title="Безпека" icon="o-shield" link="/settings/security" /&gt;
&lt;/x-menu-sub&gt;

<x-menu-sub title="Налаштування" icon="o-cog-6-tooth" :expand="true">

<x-menu-item title="Профіль" icon="o-user" link="/settings/profile" />

<x-menu-item title="Безпека" icon="o-shield" link="/settings/security" />

</x-menu-sub>

Атрибут :expand="true" є ключовим, оскільки він сигналізує компоненту підменю про необхідність бути розгорнутим за замовчуванням при завантаженні сторінки. Це дозволяє користувачам відразу бачити доступні опції без необхідності клікати на меню для розгортання.

Настройка Livewire компонента

Щоб забезпечити більшу гнучкість та контроль над поведінкою компонента підменю, можна створити Livewire компонент, який буде керувати його станом. Це особливо корисно, якщо стан підменю повинен змінюватися в залежності від деяких умов або взаємодій користувача.

&lt;?php
namespace App\Http\Livewire;
use Livewire\Component;
class SettingsMenu extends Component
{
    public $expand = true;
    public function render()
    {
        return view('livewire.settings-menu');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class SettingsMenu extends Component

{

public $expand = true;

public function render()

{

return view('livewire.settings-menu');

}

У цьому компоненті $expand використовується для контролю відображення підменю. Відповідний Blade шаблон livewire.settings-menu може виглядати так:

&lt;div&gt;
    &lt;x-menu-sub title="Налаштування" icon="o-cog-6-tooth" :expand="$expand"&gt;
        &lt;x-menu-item title="Профіль" icon="o-user" link="/settings/profile" /&gt;
        &lt;x-menu-item title="Безпека" icon="o-shield" link="/settings/security" /&gt;
    &lt;/x-menu-sub&gt;
&lt;/div&gt;

<div>

<x-menu-sub title="Налаштування" icon="o-cog-6-tooth" :expand="$expand">

<x-menu-item title="Профіль" icon="o-user" link="/settings/profile" />

<x-menu-item title="Безпека" icon="o-shield" link="/settings/security" />

</x-menu-sub>

</div>

Тепер компонент підменю керується станом $expand, що визначається у Livewire компоненті, дозволяючи динамічно змінювати поведінку підменю за потреби.