امروز میخوام برای شروع کار نمونه مثال ساده ای رو که بخشی از کامپوننتهای پروژه Jupiter برای شرکتمون بود قرار بدم. این نمونه شامل یک کنترل ورودی InputBox و Button با یک افکت و انیمیشن ملایم سفارشی شده است که قابلیتهای شناور ماوس، واکنش دادن به ورودی و وضعیت نتیجهی ورودی میباشد که ظاهری مشابه و حتی بهتر از Bootstrap 4.x را دارد. در این مثال فرم به صورت سفارشی به ورودی زبان، قالب ایمیل و تلفن حساس است.
فرم در حالت عادی
مقدار ورودی (نوع زبان) به غیر از فارسی نامعتبر تشخیص داده میشود.
تایید ورودیهای معتبر
ویژگیهای title، placeHolder، language، email و mobile در کنترل InputBox قابل تنظیم هستند. به عنوان مثال زمانی که شما مشخصهی email را برابر true قرار دهید میتوانید مقدار ورودی پست الکترونیکی را ارزیابی کنید.
مثال :
Controls.InputBox {
id:email; title: "آدرس ایمیل";
email: true;
placeHolder: "info@iostream.ir"
}
مثال :
Controls.InputBox { id:firstname;
title: "نام";
language: true;
placeHolder: "کامبیز";
}
Controls.InputBox {
id:lastname;
title: "نام خانوادگی";
language: true;
placeHolder: "اسدزاده"
}
Controls.InputBox {
id:mobile;
title: "شماره تلفن همراه";
mobile: true;
placeHolder: "09140000000"
}
Controls.InputBox {
id:email;
title: "آدرس ایمیل";
email: true;
placeHolder: "info@iostream.ir"
}
مقادیر پرچم به صورت پیشفرض برابر با false هستند. زمانی که شما مقدار یکی از مشخصههای بالا را مشخص نکنید آن false در نظر گرفته میشود.
مشخصهی پست الکترونیکی شماره تلفنهای همراه اول و ایرانسل را پشتیبانی میکند.
شما میتوانید برای مشاهده منبع کُد و همچنین نحوهی برنامهنویسی این مثال فایل ضمیمه را دریافت کنید.?
Jupiter-Component(InputBox).zip