من یک منو ی ریسپانسیو با 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>
ممنون از @mahdirafiei و @abdolrahman عزیز
یک راه ساده تر پیدا کردم
به این صورت که x-show رو حذف و بجاش از کد زیر استفاده کنم
:class="open ? 'block' : 'hidden lg:flex' "
با استفاده از پراپرتی screen.width میتونین عرض صفحه رو بدست بیارید
پس فقط کافیه بگین اگه screen.width بزرگتر از 1024 بود برابر با ترو کنه وگرنه فالس
سلام سلام،
از اول متغیرش رو تعریف کن و نسبت به اندازه صفحه مقدار دهی. همونطور که مهدی جان اشاره کرد اگر بزرگتر از یه حدی بود 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>
ممنون از @mahdirafiei و @abdolrahman عزیز
یک راه ساده تر پیدا کردم
به این صورت که x-show رو حذف و بجاش از کد زیر استفاده کنم
:class="open ? 'block' : 'hidden lg:flex' "
سلام @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"
لازمه که مرحله ی اولو انجام بدی چون کسی که با موبایل وارد میشه هیچ ریسایزی صورت نمیگیره پس آیتم ها نمایش داده میشن
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟