پیمایش افقی Pan-X
در برخی موارد طراحی رابط کاربری، نیاز داریم عنصری داشته باشیم که فرزندان آن بهصورت افقی درون آن جابجا شوند. این حالت معمولاً برای نمایش مجموعهای از گزینهها، تصاویر، کارتها یا آیتمهایی مشابه کاربرد دارد.
برای مثال، تصور کنید یک لیست از تصاویر یا دکمهها داریم که کاربر میتواند با کشیدن یا پیمایش، آنها را در راستای افقی مرور کند. در چنین شرایطی، عنصر والد نقش یک قاب یا ظرف را ایفا میکند و فرزندان درون آن بهصورت پیمایشپذیر افقی (horizontal scrollable) قرار میگیرند.
این تکنیک نهتنها باعث صرفهجویی در فضای صفحه میشود، بلکه تجربهٔ کاربری روانتری را در دستگاههای لمسی یا کوچکتر فراهم میکند.
نحوه بکار گیری
برای فعالسازی پیمایش افقی (Pan در راستای X)، کافیست یک عنصر والد با کلاس wn-pan-x تعریف کنید. این عنصر نقش قاب اصلی را دارد که فرزندان درون آن بهصورت افقی قابل جابجایی خواهند بود.
درون این عنصر، میتوانید یک div فرزند قرار دهید که شامل هر نوع محتوایی باشد—از گزینهها و تصاویر گرفته تا کارتهای اطلاعاتی یا دکمهها.
با اختصاص کلاس wn-pan-x به عنصر والد، سیستم بهطور خودکار قابلیت پیمایش افقی را فعال میکند. این ویژگی بهویژه در طراحی رابطهای لمسی یا نمایش آیتمهای زیاد در فضای محدود بسیار کاربردی است.