رتبه — Rank
کامپوننت WNRank ابزاری ساده و منعطف برای نمایش و انتخاب رتبه (Rate) است. با این کامپوننت میتوانید مجموعهای از نمادها (مثل ستاره، قلب یا تصویر دلخواه) را بهعنوان گزینههای رتبهبندی نمایش داده و مقدار انتخابی را از کاربر دریافت کنید.
ویژگیهای کلیدی
- تعاملی: انتخاب رتبه با کلیک یا لمس
- قابل سفارشیسازی: پشتیبانی از کلاسهای استایل برای نمایش نمادهای متفاوت (ستاره، قلب و غیره)
- پشتیبانی از حالتهای readonly و disabled
- واکنشگرا و سازگار با موبایل، تبلت و دسکتاپ
- پشتیبانی از راستبهچپ (RTL)
کاربردهای متداول
- نمایش امتیاز کالا یا خدمات
- دریافت بازخورد کاربر (رضایت، علاقه و غیره)
- نمایش رتبه در لیستها و نتایج
نحوه استفاده سریع
برای افزودن کامپوننت کافی است یک المنت با صفت wn-type="Rank" بسازید. با افزودن کلاسهایی مانند heart میتوانید ظاهر نمادها را تغییر دهید. مثالهای زیر نحوه مقداردهی اولیه و استفاده از رویدادها را نشان میدهند.
مثال
LTR
Star
Heart
Read only
Disabled
RTL
ستاره
قلب
فقط خواندنی
غیر فعال
خصوصیات (Attributes)
| نام | نوع | پیشفرض | توضیحات |
|---|---|---|---|
| max | عدد | 5 | حداکثر مقدار (تعداد نمادها). عدد باید >= 1 باشد. |
| value | عدد | 0 | مقدار فعلی انتخابشده؛ بازهٔ مجاز: 0 .. max |
| readonly | بولین | false | وقتی وجود دارد کاربر نمیتواند مقدار را تغییر دهد (فقط نمایش) |
| disabled | بولین | false | وقتی وجود دارد کامپوننت غیرفعال است و هیچ رویدادی ارسال نمیشود |
| onbeforechange | تابع | - | فراخوانی قبل از تغییر مقدار توسط کاربر؛ اگر تابع مقدار false برگرداند، تغییر لغو میشود. امضا: function(oldValue, newValue, element) |
| onclick | تابع | - | فراخوانی پس از تغییر مقدار؛ امضا: function(value, element) |
رویدادها
-
onbeforechange / beforechange: قبل از اعمال تغییر که کاربر درخواست آن را کرده؛ میتوانید در این رویداد اعتبارسنجی یا تأیید انجام دهید و با بازگرداندن
falseاز تغییر جلوگیری کنید.
مثال:<div wn-type="Rank" onbeforechange="return confirmChange(oldV,newV)"></div> -
onclick / change: پس از تغییر موفق مقدار فراخوانی میشود و مقدار جدید را دریافت میکنید.
مثال:<div wn-type="Rank" onclick="console.log(t.value)"></div>
نکات و راهنمایی
- برای نمایش نمادهای سفارشی، از کلاسهای CSS روی المان اصلی یا آیتمها استفاده کنید.
- اگر میخواهید مقدار را برنامهنویسی تغییر دهید، پراپرتی
valueرا ست کرده و سپس در صورت نیاز رابط را بروزرسانی نمایید (کلاس پیادهسازی معمولاً متدی مثلlayoutیاrefreshدارد). - در حالت موبایل، از لمس ساده برای کلیک و از حرکت افقی/اسکرول برای جلوگیری از انتخاب ناخواسته استفاده شود.