مهدی

3 سال پیش توسط مهدی مطرح شد

درخواست راهنمایی در مورد alpine.js

من یک منو ی ریسپانسیو با tailwind و alpine.js درست کردم
این منو وقتی در حالت دسکتاپ هست نمایش داده نمیشه چون x-show برابر با false هست وقتی در حالت موبایل روی دکمه منو کلیک کنم منو به نمایش در میاد
چطور میتونم با استفاده از الپاین منو رو طوری درست کنم که در حالت دسکتاپ x-show برابر true باشه و در حالت موبایل برابر false

    <div x-data="{open:false}" class="w-full bg-fuchsia-900">
        <div class=" container mx-auto  py-4 w-full  ">
            <header class="flex items-center  justify-between p-8 ">
                <img class="w-48 h-16" src="../src/images/logo.png" alt="">
                <div @click="open=true" class="block lg:hidden ">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="white">
                        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <div class=" lg:flex hidden ">
                    <img src="../src/images/motor.png" alt="">
                    <span class="block">Express Ship</span>
                </div>
            </header>
            <nav x-transition.duration.300ms x-show="open" class="lg:flex lg:justify-end lg:p-0 lg:m-0    lg:bg-transparent bg-yellow-700 p-5 absolute lg:static inset-5 rounded-2xl text-white lg:text-black">
                <ul class="flex flex-col  lg:flex-row relative space-x-8   space-y-3   justify-end   ">
                    <li @click.outside="open=false" @click="open=false" class="absolute top-0 right-0 lg:hidden ">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Our Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#"></a>Contact</li>
                    <li><a href="#"></a>Reserve</li>
                </ul>
            </nav>
        </div>
    </div>

ثبت پرسش جدید

مهدی

تخصص : Backend Developer

@mahdidv 3 سال پیش مطرح شد

ممنون از @mahdirafiei و @abdolrahman عزیز
یک راه ساده تر پیدا کردم
به این صورت که x-show رو حذف و بجاش از کد زیر استفاده کنم

 :class="open ? 'block' : 'hidden lg:flex' "

ارسال پاسخ

عبدالرحمان کیانی

تخصص : Backend developer

@abdolrahman 3 سال پیش مطرح شد

با استفاده از پراپرتی screen.width میتونین عرض صفحه رو بدست بیارید
پس فقط کافیه بگین اگه screen.width بزرگتر از 1024 بود برابر با ترو کنه وگرنه فالس

ارسال پاسخ

مهدی

تخصص : Backend Developer

@mahdidv 3 سال پیش مطرح شد

با استفاده از alpinejs میخواستم اینکارو بکنم

ارسال پاسخ

مهدی رفیعی

تخصص : توسعه دهنده نرم افزار

@mahdirafiei 3 سال پیش مطرح شد

سلام سلام،

از اول متغیرش رو تعریف کن و نسبت به اندازه صفحه مقدار دهی. همونطور که مهدی جان اشاره کرد اگر بزرگتر از یه حدی بود true و در غیر این صورت false.

width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if (width > 640) {
    open = true
}else{
    open = false
}

علاوه بر اون میتونی به هنگام تغییر سایز صفحه هم نسبت به سایز های مختلف واکنش نشون بدی.

<div
    @resize.window="
    width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if (width > 640) {
     open = false
    }
    "
>
</div>

و در نهایت:

<p x-show="open">Content</p>

ارسال پاسخ

مهدی

تخصص : Backend Developer

@mahdidv 3 سال پیش مطرح شد

ممنون از @mahdirafiei و @abdolrahman عزیز
یک راه ساده تر پیدا کردم
به این صورت که x-show رو حذف و بجاش از کد زیر استفاده کنم

 :class="open ? 'block' : 'hidden lg:flex' "

ارسال پاسخ

کیهان

تخصص : PHP programmer

@keyhan 3 سال پیش آپدیت شد

سلام @mahdidv
من به این شکل کار میکنم

x-data="{openResponsiveMenu : isMobileSize() ? false : true }"

اینجا یک متد داریم به نام isMobileSize که بررسی میکنه که آیا سایز فعلی صفحه اون سایزیه که برای موبایل تعریف شده یا نه

<script>
        function isMobileSize() {
            width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
            if (width < 768) {
                return true
            }
            return false
        }
    </script>

و در مرحله ی دوم باید ایونت resize رو ست کنیم موقعی که کاربر اقدام به ریسایز کردن کرد این فرآیند به صورت خودکار اتفاق بیفته
دوباره از همون فانکشنی که نوشتیم برای این امر استفاده می کنیم :

@resize.window="isMobileSize() ? openResponsiveMenu=false : openResponsiveMenu=true"

لازمه که مرحله ی اولو انجام بدی چون کسی که با موبایل وارد میشه هیچ ریسایزی صورت نمیگیره پس آیتم ها نمایش داده میشن

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

درخواست راهنمایی در مورد alpine.js

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید