القوائم المنسدلة في Livewire

القوائم المنسدلة:

قائمة منسدلة أساسية

<div x-data="{ open: false }" @click.away="open = false">
    <button @click="open = !open">القائمة</button>
    
    <div x-show="open" x-transition>
        <a href="#">الملف الشخصي</a>
        <a href="#">الإعدادات</a>
        <button wire:click="logout">تسجيل الخروج</button>
    </div>
</div>

مع لوحة المفاتيح

<div @keydown.escape="open = false"
     @keydown.arrow-down="$focus.next()"
     @keydown.arrow-up="$focus.previous()">

الإغلاق عند الإجراء

<button @click="$wire.action(); open = false">
    إجراء
</button>

شارك هذه المقالة:

مقالات ذات صلة

دليل شامل لمصادقة API باستخدام Laravel Sanctum

أنشئ مصادقة API آمنة باستخدام Laravel Sanctum لتطبيقات SPA والموبايل.

تحديد معدل الطلبات في Laravel: احمِ تطبيقك

نفّذ تحديد معدل الطلبات لحماية تطبيق Laravel من إساءة الاستخدام.

مكونات Blade في Laravel: بناء واجهات قابلة لإعادة الاستخدام

أنشئ مكونات قوية قابلة لإعادة الاستخدام باستخدام Laravel Blade.

التعليقات (0)

يرجى تسجيل الدخول لترك تعليق. تسجيل الدخول

لا توجد تعليقات بعد. كن أول من يعلق!

.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.9rem; } .comment-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.7rem; }

العودة إلى جميع المقالات

hljs.highlightAll(); .prose pre { background: #282c34; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1.5rem 0; direction: ltr; text-align: left; } .prose pre code { background: transparent; padding: 0; font-size: 0.9rem; line-height: 1.6; color: #abb2bf; font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; direction: ltr; text-align: left; } .prose code:not(pre code) { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.875em; color: #e11d48; direction: ltr; unicode-bidi: isolate; } .prose h2 { margin-top: 2rem; margin-bottom: 1rem; scroll-margin-top: 100px; } .prose h3 { scroll-margin-top: 100px; } .prose p { margin-bottom: 1rem; line-height: 1.8; } .toc-wrapper { border-left: 3px solid var(--primary-color, #6366f1); } [dir="rtl"] .toc-wrapper { border-left: none; border-right: 3px solid var(--primary-color, #6366f1); } .toc-link:hover { color: var(--primary-color, #6366f1) !important; }