انت دیزاین

انت دیزاین یک لایبری uicomponent است که اکثر react دولوپرها وبعضی از

vue دولوپرها ازش استفاده می کنند من بعضی از تگ های که در react به موارد

استفاده می شود را توضیح می دهم.

تو این مقاله قرار است در انت دیزاین در مورد تگ های

divider ، row ، Col ، dropdown ، pagination ، cascader ، Select ،

Switch ، timepicker ، treeselect ، treenode ، upload ، badge ،configprovider

Collapse ، popover ، tabs ، Drawer ، modal ، Result ، توضیح بدهم و این تگ ها چه

خصوصیت هایی در پروژه های که از انت دیزاین استفاده می کنید دارد.

Divider

با این تگ میتوانیم با اتربیو ت orientation همه تگ ها را به چپ چ ین یا راست چین

نشان دهد

Row col typegraphy

با تگrow و اتربیوت gutter چه قدر در مطالب فاصله بگذاریم

مثالم در کلیپ بدون صدا در مورد row col typography نشان میدهم.

اگه در کلیپ دیده باشیم رفتارهای Row ,col با خصوصیاتی که میدهیم کاملا فرق میکند

Dropdown

این مثال در کلیپ نشان میدهم که چطور می شود باهاش کار کرد وچه خصوصیاتی دارد

شرمنده کمی کلیپ طولانی کردم میخواستم همه حالت های dropdown تا حدی نشان دهم . توی dropdown یک خصوصیت trigger داریم که حالتش مشخص میکنیم که من رو حالت click گذاشتم و overlay داشتیم که قرا ر است چه چیزی وقتی کلیک کردم نشان دهد و placement این نشون میدهد وقتی کلیک کردی همه تگ هات در کجا نشان دهد که مثلا خصوصیات هایی مثل top left top right bottom center bottom right داره و من برای استایل دهی از tailwindcss استفاده می کنم.

https://www.aparat.com/v/DAeq9

https://www.aparat.com/v/MuUCw

modal

drawer

خروجی کد

مثل modal بود فقط برای closable گذاشتم

switch

Pagination

defult carrent مثلا از یک شروع شود تاtotal که اخرین صفحه 20 است

select

خروجی کد

Timepicker

Tree select treenode

خروجی

badge

collapse

خروجی

popover

خروجی

tabs

خروجی

در کلیپ

https://www.aparat.com/v/USfgR

Result

config provider

خزوجی

مقاله ی بعدی در مورد antdesign pro,umi می باشد