کشویی ها Dropdowns

در بسیاری از مواقع نیازمند باز شدن یک پنجره در زیر یا بالا یا یکی از سمتهای موضوع مورد نظر هستیم، موضوع کشویی این امکان را به شما خواهد داد.

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

دکمه های کشویی

دکمه های کشویی، تشکیل شده از یک button از نوع wn-type=dropdown و کلاس dropdown-toggle و یک div که از کلاس dropdown استفاده شده است.

زمانیکه بر روی دکمه کلیک شود، div از جنس dropdown با هر محتوایی نمایش داده میشود.

خصوصیات مرتبط با دکمه باید در دکمه مقدار دهی شود و خصوصیات مرتبط با dropdown در آن. برای مثال جهت باز شدن آن، اندازه و ...

توجه داشته باشید، کلاس dropdown باید دقیقا بعد از تعریف دکمه آورده شود، و گرنه، سیستم قادر به تشخیص نیست.

LTR

RTL

انواع نمایش و باز شدن

کلاس dropdown-toggle مخصوص دکمه است و علامت یک فلش را در کنار دکمه نمایش میدهد. اگر متنی وجود نداشته باشد، فقط یک فلش نمایش داده میشود. اگر میخواهید به جای علامت فلش از آیکون خاصی استفاده کنید، این کلاس را نسبت ندهید.

کلاس های مرتبط با dropdown-toggle عبارتند از:

نام کلاس	موضوع فراخوان	کادر بازشو
pos-top	علامت فلش به سمت بالا	کادر بالای موضوع فراخوان (دکمه) باز شود.
pos-bottom		کادر پایین موضوع فراخوان (دکمه) باز شود.
pos-end	علامت فلش به سمت انتها، در چپ به راست سمت راست دکمه و در راست به چپ در سمت چپ دکمه قرار میگیرد. همچنین جهت آیکون تغییر خواهد کرد.	کادر بعد از قرار گیری موضوع فراخوان (دکمه) باز شود.
pos-start	علامت فلش در ابتدا قرار میگیرد، در چپ به راست سمت چپ دکمه و در راست به چپ در سمت راست دکمه قرار میگیرد. همچنین جهت آیکون تغییر خواهد کرد.	کادر قبل از قرار گیری موضوع فراخوان (دکمه) باز شود.
icon-start	زمانیکه میخواهید حتما فلش با هر جهتی در ابتدای دکمه باشد.
icon-end	زمانیکه میخواهید حتما فلش با هر جهتی در انتهای دکمه باشد.

موارد ذکر شده در بالا، بر اساس شرح ستون عمل خواهد کرد

کلاسهای مرتبط با dropdown در زیر توضیح داده شده است.

align-end	انتهای کادر با انتهای موضوع فراخوان یکسان در نظر گرفته خواهد شد.
align-fit	عرض کادر، با عرض موضوع فراخوان، یکسان در نظر گرفته میشود. این در صورتی است که عرض کادر کوچکتر از عرض موضوع فراخوان باشد.
show	کادر را از حالت مخفی درآورده و نمایش میدهد.
single	کادر فقط توسط موضوع درخواست کننده باز یا بسته میشود.

LTR

RTL

باز شو یکسان

در مواقعی، لیست بازشو برای چندین موضوع یکسان است، برای جلوگیری از کدنویسی اضافی، کافیست div را نام گذاری کرده و در زمان فراخوانی، id آنرا معرفی کنید.

در این نوع، اصلا نیاز به رعایت قانون قرارگیری div بعد از موضوع فراخوان نیست.

LTR

RTL

باز و بسته فقط با دکمه

بعد از باز شدن کادر، در هر جای صفحه یا هر موضوع دیگری کلیک کنید، کادر باز شده به طور خودکار بسته خواهد شد. اگر تمایل دارید فقط با کلیک بر روی موضوع باز کننده، با کلیک بر روی همان موضوع، کادر بسته شود، کلاس single را به dropdown اضافه کنید.

LTR

RTL

باز شدن با event خاص

اگر میخواهید غیر از کلیک کردن، در event خاصی عمل باز شدن کادر اتفاق بیافتد، کافیست خصوصیت wn-dropdown-event را مقدار دهی کنید. با رخداد آن event عمل باز شدن صورت میپذیرد.

در wn-dropdown-event تمامی eventهای مد نظر را بنویسید، مانند: focus, blur

LTR

RTL

باز شو با جاوا اسکریپت

اگر تمایل دارید با جاوا اسکریپت، عمل باز شدن را انجام دهید، توابع مرتبط با آنرا نسبت به موضوع بازکننده صدا کنید.