الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

تصميم النملة الدردار

معرض مكون

وثائق API

جلب مجموعة تصميم النمل المذهلة إلى الدردار!

تم تصميمه بالكامل باستخدام elm-css ! لا حاجة إلى ورقة الأنماط الخارجية. فقط elm install supermacro/elm-antd وأنت على ما يرام!

إشعار التنمية المبكر:

لا يتم تنفيذ تصميم Elm ANT بالكامل وفي مرحلة مبكرة / استكشافية. قد لا تعمل الكثير من واجهات برمجة التطبيقات بعد (في حالة أن هذا هو الحال ، يرجى الإبلاغ عن ذلك كمسألة - والتي سأضعها الأولوية). تخضع واجهة برمجة التطبيقات الحالية لتغيير متكرر ، ولكن نظرًا لأن ELM رائع للغاية؟ ، يتم ضمان إصدار أي تغييرات كسر تحت إصدار رئيسي (وفقًا لـ Semver).

تثبيت 

 elm install supermacro/elm-antd

الاستخدام

قم بإعداد ورقة الأنماط في جذر مشروع الدردار الخاص بك

لدى Elm Antd ورقة أنماط يتم تنفيذها في Elm والتي يجب عليك ربطها بجذر مشروع ELM الخاص بك. يجب عليك استخدام واحد من Ant.Css.defaultStyles أو Ant.Css.createThemedStyles customTheme (انظر المستندات الرسمية للتعرف على Theming). 

 import Ant.Css

view : Model -> Html Msg
view model =
    div []
      [ Ant . Css . defaultStyles
      , viewApp model
      ]

تطبيق CSS تطبيع

تم تصميم Elm Ant Design مع تطبيعها.

يجب عليك إضافة Nordalize.css إلى مشروعك وإلا فإن المكونات قد لا تبدو كما هو متوقع.

لديك ثلاثة خيارات:

  • أضف Normalize.css كعلامة link إلى HTML مباشرة 
 < link href =" https://pagecdn.io/lib/normalize/8.0.1/normalize.min.css " rel =" stylesheet " crossorigin =" anonymous "  >
  • أضف normizlize.css كوحدة ELM باستخدام ELM-CSS-Mode-Normization 
 import Css.ModernNormalize as ModernNormalize

view : Model -> Html Msg
view _ =
    [ ModernNormalize . globalHtml
    , Ant . Css . defaultStyles
      -- Your application view comes here
    ]
  • استخدم Bundler for Nodejs لتحميل تطبيع في تطبيقك في وقت البناء.

رابط وحدة NPM: https://www.npmjs.com/package/normalization 

 require ( 'normalize' )

[اختياري] - إضافة رسوم متحركة إضافية

هناك رسوم متحركة إضافية يمكنك إضافتها إلى مشروع elm-antd الخاص بك عن طريق إضافة معالجات أحداث JS إلى تطبيقك.

يمكنك إضافتها بواحدة من طريقتين:

  • أضف علامة script التالية إلى head ملف HTML الخاص بك: 
 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/index.js " > </ script >
  • قم بتثبيت حزمة elm-antd-extras NPM واستخدم أداة تجميع مثل WebPack و Gulp و ETC من أجل تضمين الرمز في ملف HTML الخاص بك

المساهمة

تريد المساعدة؟

  • تحقق من المشكلات ، وابحث عن "العدد الأول الجيد" أو "المساعدة المطلوبة"!
  • تحقق من المستند المساهمة

إلهام:

  • https://github.com/aforemny/elm-mdc
  • https://github.com/edutainmentlive/elm-bootstrap
  • https://github.com/noredink/noredink-ui
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل