Kendoreact Challenge: دستور العمل های از دست رفته Epicure

قوطی

ناوبری برتر سایت از این کار به همراه اجزای بعدی استفاده می کند. به جای استفاده display: flex در CSS سفارشی برای ایجاد فاصله ، توانستم از اجزای AppBarsection و AppBarsPacer با استفاده از کلاس ابزار صفر استفاده کنم.

Gridlayout و GridLayoutItem

در مکانهایی که نیاز به ایجاد یک شبکه داشتم ، مانند صفحات لیست و نتایج جستجو ، از این مؤلفه ها استفاده کردم. برخلاف همتای شبکه MUI ، این موارد استفاده می کنند display: grid به جای اینکه display: flexبشر من از CSS Grid کمتر آشنا هستم تا با Flex ، اما ساختن یک طرح متقارن به اندازه کافی ساده است.

کاری که من با آن مشکل داشتم ، پاسخگو بودن طرح است. من آموزش هایی در مورد نحوه انجام این کار با Kendoreact (مانند این یکی) پیدا کردم که به پیکربندی گسترده یا ایجاد شنونده برای تغییر اندازه پنجره نیاز دارند. هیچکدام از این موارد برای من جذاب نبودند ، بنابراین من یک کلاس ابزار دوانی را در صفحه شیوه خود ایجاد کردم ، یکی برای یک طرح دو ستونی (که در صفحه نتایج جستجو استفاده می شود) و دیگری برای یک طرح ستونی (که در تمام صفحات شبکه لیست استفاده می شود).

کارت

در داخل هر مؤلفه GridLayoutItem یک جزء کارت دستور العمل مشترک بود که از کارت و اجزای بعدی مانند Cardimage ، Cardheader و Cardbody استفاده می کرد. برخی از ویژگی های سبک که من مجبور شدم با کلاسهای ابزار ارائه شده توسط صفحات شیوه های مضامین (بیشتر در مورد آن بعداً) غلبه کنم.

جعبه متن

من از طریق فرم های موجود در سایت چیز زیادی ندارم ، اما دو مورد وجود دارد: جستجو و صفحه نتایج جستجو.

تراشه

ممکن است فکر کنید که من از مؤلفه تراشه در صفحه جزئیات دستور العمل استفاده می کنم ، اما اشتباه می کنید. اینها در واقع یک جزء سفارشی با تمام کلاس ها برای بازآفرینی ظاهر یک تراشه هستند. دلیل استفاده از مؤلفه Kendoreact ساده است: شما نمی توانید آن را به یک پیوند تبدیل کنید ، فقط یک دکمه. برای اهداف سئو ، من ترجیح می دهم در صورت نیاز به ناوبری از پیوند استفاده کنم.

با این حال ، در صفحه نتایج جستجو ، من از تراشه همانطور که توسط Kendoreact تهیه شده است استفاده می کنم. هیچ ناوبری در آنجا وجود ندارد: با کلیک بر روی یکی از این موارد ، فیلترهای جستجو را دوباره تنظیم می کند. تعداد ضربه در کنار هر جنبه نیز یک تراشه است ، اما صرفاً برای طراحی صفحه نمایش آن استفاده می شود.

کادر انتخاب

در صفحه نتایج جستجو ، هر جنبه توسط یک کادر انتخاب نشان داده می شود. بررسی آن با توجه به آن انتخاب فیلتر می شود. عدم بررسی آن انتخاب را خنثیسازی می کند.

گفتگو

برای بالا بردن جستجو ، معین را پیشنهاد می کنم ، من از مؤلفه گفتگو استفاده می کنم. فوق العاده ساده و بدون نیاز به سفارشی سازی.

کشو

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

من کشو را تا حدودی ضد انعطاف پذیر پیدا کردم ، زیرا رفتار پیش فرض انتظار دارد لیستی از موارد را به عنوان ناوبری ارائه دهد. با این حال ، یک مؤلفه به نام وجود دارد DrawerNavigation این می تواند برای قرار دادن دستی هر نوع محتوا در داخل کشو استفاده شود.

سوئیچ

من یک سوئیچ را در هدر قرار دادم تا بین حالت های سبک و تاریک مبادله شود (بیشتر در یک دقیقه در آن). سفارشی سازی کاملی وجود ندارد. این فقط می تواند متن سفارشی را در حالت های مختلف ضامن فراهم کند ، و من واقعاً می خواستم از نمادهای خورشید و ماه استفاده کنم. سایتی را پیدا کردم که به شما امکان می دهد نمادها را جستجو کنید ، بنابراین من آن شخصیت ها را کپی کردم و آنها را در متن های متن قرار دادم.

انتخاب پیش فرض به حالت Light ، اما تغییر آن باعث تغییر در فضای ذخیره سازی محلی می شود و به کاربر این امکان را می دهد تا بدون نیاز به بار دیگر روی آن ، از آن موضوع استفاده کند.

اجزای سفارشی

همانطور که اشاره کردم ، برخی از مؤلفه های Kendoreact تطبیق پذیری کافی برای استفاده از خارج از جعبه ارائه نکردند. من می خواهم در اینجا یک دقیقه در مورد آنها صحبت کنم.

دکمه

من قبلاً به این یکی اشاره کردم ، اما فکر می کنم تکرار می شود. بعضی اوقات می خواهید پیوندی مانند یک دکمه را سبک کنید و Kendoreact راهی آسان برای انجام این کار ارائه نمی دهد. هر وقت پیوندی می خواستم که شبیه یک دکمه باشد ، دکمه را ایجاد می کردم ، کلاسهای CSS آن را کپی می کردم و سپس پیوند را به صورت دستی ایجاد می کردم. (در مورد من ، من از مؤلفه پیوند NextJS استفاده کردم.)

{/* Button component */}
<Button
  themeColor='primary'
  fillMode='solid'
>PrintButton>

{/* Recreated link  */}
<Link
  className='k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md'
  href={`/recipe/${slug}/print`}
  target='_blank'
>
  <span className='k-button-text'>Printspan>
Link>

تراشه

همانطور که اشاره کردم ، “تراشه ها” در صفحه جزئیات دستور العمل ، عناصر لنگر سفارشی هستند. دقیقاً مثل من با پیوندهایی که شبیه دکمه ها بود ، یک تراشه ایجاد کردم ، کلاس های CSS آن را کپی کردم و یک عنصر لنگر را با آن کلاس ها ایجاد کردم. می توانید مؤلفه مشترک سفارشی را در اینجا مشاهده کنید:

https://github.com/peiche/epicure-recipes/blob/kendo-challenge/src/components/chiplink.tsx

پیجر

تا آنجا که می توانم از مستندات بگویم ، از مؤلفه پیجر در متن جدول داده استفاده می شد. من دو مورد استفاده داشتم: صفحه بندی برای صفحات مرور و صفحه نتایج جستجو. اولی مجبور به ناوبری بود ، بنابراین آنها باید پیوندهایی باشند. دومی از زمان به روزرسانی صفحه ، دکمه هایی هستند اما منجر به ناوبری به دور از صفحه نمی شوند. (URL به روز می شود ، بنابراین می توان یک نتیجه جستجوی خاص به آن مرتبط شد.)

من به نوشتن مؤلفه های صفحه بندی خودم پایان دادم ، یکی برای هر مورد استفاده. من به طور خلاصه نوشتن یک مؤلفه واحد را در نظر گرفتم که می تواند هر دو را اداره کند ، اما چنین چیزی به عنوان مهندسی بیش از حد وجود دارد! 😆 در نتیجه ، دو مؤلفه وجود دارد که هر کدام منطق یکسان برای نمایش هر صفحه از نمایش هستند.

https://github.com/peiche/epicure-recipes/blob/kendo-challenge/src/compentents/pagination.tsx
https://github.com/peiche/epicure-recipes/blob/kendo-challenge/src/components/searchpagination.tsx

قصور

مؤلفه آرد سوخاری مورد دیگری بود که به عناصر نمی توان مقصدی را در خارج از آن ارائه داد onClick رویداد این حتی در اینجا حس کمتری ایجاد می کند زیرا هر برگ در مسیر آرد سوخاری یک عنصر لنگر است ، اما داشتن “#” به عنوان مقدار HREF از کدگذاری سخت است. به منظور داشتن یک مؤلفه آرد سوخاری که عناصر لنگر عملکردی را ارائه می دهد ، من خودم را نوشتم ، با استفاده از کلاسهای CSS موجود که توسط مؤلفه Kendo استفاده می شود.

https://github.com/peiche/epicure-recipes/blob/kendo-challenge/src/components/breadcrumbs.tsx

با خوشحالی طراحی شده است

من یک حساب کاربری در Telerik ایجاد کردم و برای محاکمه هفت روزه Theme Builder Pro ثبت نام کردم ، فقط برای اینکه بتوانم بیش از یک طرح داشته باشم. (ردیف آزاد محدودیت یک را دارد.) من دو موضوع رنگی ایجاد کردم: یک نور و یک تاریکی.

من دو موضوع را صادر کردم ، اما استفاده من از بارگیری ها در طول دوره توسعه تغییر یافت. من در ابتدا از صادرات SASS استفاده کردم ، اما دریافتم که متغیرهای مورد استفاده در آنجا متغیرهای SASS وجود دارد ، نه خصوصیات سفارشی (یعنی متغیرهای CSS بومی) ، بنابراین من به جای آن به صادرات CSS تغییر کردم. (برگه شیوه جهانی جداگانه من هنوز از SASS استفاده می کند.)

من در ابتدا شیوه های شیوه ای را داخل آن قرار داده ام /src/themes، اما آن را به /public از آنجا که وابستگی سوئیچ کننده تم CSS که من از آن استفاده می کردم به URL استاتیک و عمومی نیاز داشتم.

یادداشت های نهایی

من به استفاده از برخی از کلاس های ابزار برای نادیده گرفتن برخی از سبک های پیش فرض اشاره کردم. قبل از اینکه من یک شیرجه عمیق به سبک های موجود با موضوع انجام دهم – هر دو صفحه شیوه پایه و پرونده های صادر شده از Theme Builder – من از Tailwind استفاده کردم تا آنچه را که لازم داشتم تکمیل کنم. با این حال ، بعد از چند حفر ، فهمیدم که کندو قبلاً بیشتر آنچه را که لازم داشتم ارائه می داد. (همانطور که اشاره کردم ، مجبور شدم یک کلاس ابزار مرتبط با شبکه ایجاد کنم.)

من همچنین می خواهم توجه داشته باشم که در حالی که من از چند آیکون استفاده می کنم ، هیچکدام از آنها Kendo نیستند. من استفاده از آنها را شروع کردم ، اما برخی از آنها مانند نماد چنگال و چاقو که در صفحه جزئیات دستور العمل استفاده می کنم وجود ندارد. من برای آن از قلم عالی استفاده کردم. من به جای عدم تناقض بصری (بهشت ممنوع است!) تصمیم گرفتم درست کنم همه نمادها از قلم عالی هستند.

بهترین برنامه های سرگرمی وب آنهایی هستند که برای خودتان می سازید. در این مورد کمتر صادق نیست ، زیرا من کاملاً از آن استفاده می کنم. (“من فقط رئیس جمهور نیستم ، من هم مشتری هستم!”) برای من ارزشمند است که بتوانم دستور العمل را از طریق تلفن خود بکشم. برای این منظور ، کل سایت پاسخگو است: از صفحه اصلی و مرور شده تا صفحات جزئیات جستجو و دستور العمل. شاید بتوانید از آن نیز استفاده کنید!

با تشکر از خواندن!

من در استفاده مجدد از سایت موجود خود برای استفاده از مجموعه جدیدی از مؤلفه ها ، سرگرم کننده (و برخی از ناامیدی ها) بسیار سرگرم کننده بوده ام. و اگر شما یک غذای غذایی هستید ، احساس راحتی کنید که به سایت دستور العمل من بپردازید. این یک کار عشق است.

من هنوز هم ممکن است در مورد فرآیندی که برای تولید پرونده های JSON که پایه سایت استاتیک را تشکیل می دهم ، بنویسم ، اما این یک داستان برای زمان دیگری است.