اگر با Livewire و PHP کار کرده باشی، حتماً به این مشکل برخوردی که طراحی رابط کاربری پیچیده و تعاملی سخت می‌شود. استفاده از کامپوننت‌های آماده، طراحی واکنش‌گرا و مدیریت استایل و JS می‌تواند گیج‌کننده باشد.

اینجاست که Flux UI به عنوان یک کتابخانه رابط کاربری مدرن برای Livewire وارد می‌شود 😎

در این مقاله کامل یاد می‌گیری:

✅ Flux UI چیست
✅ مزایای استفاده از Flux UI
✅ کامپوننت‌های آماده
✅ نحوه نصب و راه‌اندازی
✅ مثال عملی فرم، مودال، جدول و dropdown
✅ نکات پیشرفته و ترکیب با Livewire

🧠 Flux UI چیست؟

Flux UI یک کتابخانه کامپوننت‌های آماده برای Livewire است که به شما امکان می‌دهد بدون نوشتن CSS و JS زیاد، رابط‌های کاربری زیبا و واکنش‌گرا بسازی.

ویژگی‌های کلیدی:

• کامپوننت‌های آماده برای فرم، دکمه، کارت، مودال، جدول، dropdown و …

• پشتیبانی کامل از Livewire

• طراحی واکنش‌گرا با Tailwind

• مدیریت آسان state و events بدون نوشتن JS اضافی

⚡ نصب و راه‌اندازی Flux UI

برای استفاده از Flux UI کافیست آن را با composer نصب کنید:

composer require livewire/flux

سپس در Blade خود کامپوننت‌ها را فراخوانی می‌کنید:

<flux:button>کلیک کن</flux:button>

🎨 کامپوننت‌های اصلی Flux UI

1️⃣ کارت‌ها (Card)

<flux:card class="max-w-md mx-auto mt-10">
    <h2 class="text-lg font-bold">عنوان کارت</h2>
    <p>این یک متن نمونه در داخل کارت است.</p>
</flux:card>

2️⃣ فرم‌ها (Form) و input

<flux:form wire:submit.prevent="submitForm">
    <flux:input label="نام" wire:model="name" required />
    <flux:input label="ایمیل" wire:model="email" type="email" required />
    <flux:button type="submit">ارسال</flux:button>
</flux:form>

3️⃣ مودال (Modal)

<flux:button wire:click="$toggle('showModal')">نمایش مودال</flux:button>

<flux:modal wire:model="showModal" title="اطلاعات مهم">
    <p>این یک مودال آماده Flux UI است.</p>
    <flux:button wire:click="$toggle('showModal')">بستن</flux:button>
</flux:modal>

4️⃣ Dropdown انتخاب گزینه

<flux:dropdown label="انتخاب رنگ">
    <flux:dropdown.item wire:click="$set('color', 'red')">قرمز</flux:dropdown.item>
    <flux:dropdown.item wire:click="$set('color', 'green')">سبز</flux:dropdown.item>
    <flux:dropdown.item wire:click="$set('color', 'blue')">آبی</flux:dropdown.item>
</flux:dropdown>

<p>رنگ انتخاب شده: {{ $color }}</p>

5️⃣ جدول با اکشن‌ها (Table)

<flux:table>
    <flux:table.head>
        <flux:table.th>نام</flux:table.th>
        <flux:table.th>ایمیل</flux:table.th>
        <flux:table.th>عملیات</flux:table.th>
    </flux:table.head>

    <flux:table.body>
        @foreach($users as $user)
            <flux:table.tr>
                <flux:table.td>{{ $user->name }}</flux:table.td>
                <flux:table.td>{{ $user->email }}</flux:table.td>
                <flux:table.td>
                    <flux:button wire:click="delete({{ $user->id }})" color="red">حذف</flux:button>
                </flux:table.td>
            </flux:table.tr>
        @endforeach
    </flux:table.body>
</flux:table>

🧩 ویژگی‌های پیشرفته

Islands

ساخت بخش‌های ایزوله برای بهبود عملکرد و جلوگیری از رندر اضافی:

@island(name: 'stats', lazy: true)
    <div>{{ $this->expensiveStats }}</div>
@endisland

Async Actions

اجرای عملیات به صورت غیرهمزمان بدون مسدود کردن سایر درخواست‌ها:

<button wire:click.async="logActivity">ثبت فعالیت</button>

#[Async]
public function logActivity() {
    // عملیات طولانی
}

Deferred و Lazy Loading

بارگذاری کامپوننت‌ها به صورت تنبل یا پس از لود اولیه صفحه:

<livewire:revenue defer />         <!-- Deferred -->
<livewire:revenue lazy.bundle />   <!-- Bundled -->

wire:intersect و wire:ref

واکنش به ورود عنصر به viewport و ارجاع به المان‌ها:

<div wire:intersect.once="loadMore"></div>

<div wire:ref="modal"></div>
<button wire:click="$js.scrollToModal">اسکرول به مودال</button>
<script>
this.$js.scrollToModal = () => {
    this.$refs.modal.scrollIntoView()
}
</script>

✅ مزایای استفاده از Flux UI

• توسعه سریع و بدون نیاز به CSS و JS زیاد

• رابط‌های واکنش‌گرا و مدرن

• سازگاری کامل با Livewire و معماری PHP

• مناسب برای پروژه‌های بزرگ و تیمی

• قابلیت استفاده مجدد کامپوننت‌ها

• آسان برای تازه‌کارها و حرفه‌ای‌ها

🔚 جمع‌بندی

Flux UI یک کتابخانه قدرتمند و آماده برای ساخت رابط کاربری مدرن با Livewire است. با استفاده از Flux UI می‌توانی:

• فرم‌ها، مودال‌ها، جداول و Dropdown های واکنش‌گرا بسازی

• بدون دردسر JS و CSS، کامپوننت‌های آماده داشته باشی

• عملکرد و بارگذاری صفحات را با Islands، Async و Deferred بهینه کنی

💡 اگر با Livewire کار می‌کنی و می‌خوای پروژه‌های حرفه‌ای و زیبا بسازی، Flux UI یکی از بهترین انتخاب‌هاست.