هذا مثال وتجربة لاستخدام اطار واجهات الويب المبرمج بلغة روست واسمه ياو، مع اطار فلوبيت التنسيقي والتصميمي
ماهو فلوبيت؟ اسمه بالانجليزي "flowbite" وهو اطار لتشكيل هياكل الويب باستخدام تيلوايند "tailwindcss" ما يميز فلوبيت هو انه يختصر الوقت في ايجاد مكونات مترابطة ومتناسقة ومختبرة فتوفر الوقت والجهد.
- الأهداف:
- استخدام روست في برمجة واجهات الويب
- اردت تجربة تصميم موقع بالروست كاملا من ناحية النظام الداخلي والواجهات
- وجدت سهولة في اطار فلوبيت واردت اختباره هنا
This is an illustraiton to show how to use Flowbite framework with Yew framework.
My goals
- Using Rust in backendend and frontend
- Develop a web app with support to RTL (Arabic) and LTR (English)
- I like FLowbite framework and I want to use it with Yew to minimize effort.
Screen sample
My feedback till now:
-
Flowbite can be used with Yew, but need some customization because not all scripts are done.
-
For example I found that in
index.htmlthe tagslinkandscriptwhich not havedata-trunknot working properly:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Yew App with Flowbite</title> <link data-trunk rel="tailwind-css" href="tailwind.css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.css" rel="stylesheet" /> </head> <body> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script> </body> </html>
- In this example Dark mode should be active, but it is not.
- It is fixed by pointing to the css and js files locally as below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Yew App with Flowbite</title> <link data-trunk rel="tailwind-css" href="tailwind.css" /> <link href="assets/flowbite.min.css" rel="stylesheet" /> </head> <body> <script src="assets/flowbite.min.js"></script> </body> </html>
-
I'm not sure if using JS callback will resolve other issues or not, like exmample: yew / exmaples / js_callback
Finally, I would like to say I'm very passionate about frontend solutions with Rust and still alot of work needed to improve this.