Input در Tailwind-css
در این مقاله از گروه برنامه نویسی وارنا ، به بررسی Input ها در فریمورک Tailwind-css میپردازیم.
یکی از مهم ترین قسمت های هر فرم و پرسش نامه ای ، input ها هستند که داده ای را از سمت کاربر دریافت میکند. پس باید در عین زیبایی ، ساده و کاربردی باشد تا بهترین تعامل بین کاربر و سایت را برقرار سازد. در این مقاله قصد داریم با چند input طراحی شده با فریمورک Tailwind-css آشنا بشیم.
-
1- Input در اندازه های مختلف
کلاس های مختلفی برای Font-size در Tailwind-css وجود دارد که امکان طراحی input در اندازه های مختلف را برای ما فراهم میسازد:
-
2- Input غیر فعال
اگر بخواهیم طبق داده های قبلی دریافتی از سمت کاربر ، فیلدی از input را غیر فعال کنیم ، از قطعه کد زیر استفاده میکنیم:
-
3- Input اعتبار سنجی
در صورتی که مقدار داده ی ورودی از سمت کاربر ، معتبر یا غیر معتبر باشد ، میتوان از input های زیر استفاده کرد:
Well done! Some success message.
Oh, snapp! Some error message.
-
4- Input همراه با آیکون
اگر بخواهیم برای input ، آیکون یا در کل بخش ثابتی داشته باشیم ، به این شکل عمل خواهیم کرد:
@
-
5- Input جست و جو
یکی از مهم ترین و کلیدی ترین بخش های هر سایتی ، بخش جست و جو میباشد:
-
6- Input همراه با Dropdown
میتوان از لیست Dropdown هم در input ها استفاده کرد:
دوره ی آموزش Tailwind وارنا
ما در گروه برنامه نویسی وارنا ، دوره ی آموزشی مخصوص تیلویند آماده کردیم که ازصفر تا صد اون و تموم فوت و فن های استفاده از کلاس هایش رو بهت آموزش میدیم .اگر میخوای تیلویند رو کامل یاد بگیری ، این دوره ی آموزشی رو از دست نده.
بخوانید درباره : آموزش طراحی مثلث با Tailwind-css
شما میتوانید input های جذابی رو با کلاس های متنوع تیلویند طراحی کنید و وبسایتی متفاوت نسبت به وبسایت های تکراری موجود داشته باشید.
آموزش و استخدام در وارنا
آیا میدانستید که شما میتوانید این Tailwind جذاب و دوست داشتنی رو از صفر تا صد با دوره ی آموزشی که گروه برنامه نویسی وارنا تدارک دیده ، یاد بگیری ؟ خبر خوب همینجا به پایان نمیرسه. شما میتوانید پس از پایان دوره و کسب نمره ی قبولی ، با شرکت وارنا همکاری کنی و پروژه ی طراحی قالب UI دریافت کنی. همین حالا در دوره ی آموزش Tailwind-css و sass وارنا ثبت نام کن . فرصت رو از دست نده !