تجربة استخدام اطار واجهات ياو مع اطار فلوبيت للواجهات

هذا مثال وتجربة لاستخدام اطار واجهات الويب المبرمج بلغة روست واسمه ياو، مع اطار فلوبيت التنسيقي والتصميمي

ماهو فلوبيت؟ اسمه بالانجليزي "flowbite" وهو اطار لتشكيل هياكل الويب باستخدام تيلوايند "tailwindcss" ما يميز فلوبيت هو انه يختصر الوقت في ايجاد مكونات مترابطة ومتناسقة ومختبرة فتوفر الوقت والجهد.

استخدام روست في برمجة واجهات الويب
اردت تجربة تصميم موقع بالروست كاملا من ناحية النظام الداخلي والواجهات
وجدت سهولة في اطار فلوبيت واردت اختباره هنا

ملحوظة: في الحقيقة انا طموح جدا لاستخدام روست في صناعة برمجيات الويب بشكل كامل من نظام داخلي وخارجي، ما زال هناك الكثير في هذا المثال وارحب بمشاركاتكم

Try and experimenting using Flowbite framework with Yew

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.html the tagslink and script which not have data-trunk not 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.

moaz-mokhtar / try_yew_with_flowbite Goto Github PK

try_yew_with_flowbite's Introduction

تجربة استخدام اطار واجهات ياو مع اطار فلوبيت للواجهات

Try and experimenting using Flowbite framework with Yew

try_yew_with_flowbite's People

Contributors

Stargazers

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent