anywhere webcomponents

في أي مكان مكونات الويب

العرض التوضيحي هنا | خريطة الطريق

هذا المشروع هو عمل مستمر. انظر صفحة المشاريع لتتبع كل الحالة.

لا يزال نظام التصميم والمواصفات مفتوحة ولكن يجب أن تكون مستوحاة في السبل ، bootstrap و tailwind.

إعطاء ردود الفعل

اكتب تعليقًا حول نظام التصميم ، أعط ملاحظاتك!

دعم المتصفح

الكروم	حافة جديدة (كروم)	سفاري	Firefox	الحافة القديمة	أي
60+	79+	10.1+	63+	16-18 (Polyfills)	> = 11 (Polyfills)

انظر مستندات كاملة

كيفية التثبيت

NPM

تثبيت التبعية:

npm i @tiagoboeing/anywhere-webcomponents

واستيراد anywhere-webcomponents.js :

 < script src = "@tiagoboeing/anywhere-webcomponents/dist/anywhere-webcomponents/anywhere-webcomponents.js" > </ script >

للاستخدام في الأطر ، راجع صفحة الاستنسل.

عبر CDN (مرشح إطلاق سراح)

يمكنك الآن اختبار المكونات في صفحة HTML التي تستورد عبر البرنامج النصي من CDN.

مستقر

 < script src =" https://cdn.tiagoboeing.com/anywhere-webcomponents/master/anywhere-webcomponents/anywhere-webcomponents.js " > </ script >
< aw-button label =" Primary " mode =" square " color =" outline " status =" success " > </ aw-button > 

مرشح إطلاق سراح (تطوير فرع)

(انتباه !! لا تستخدم للإنتاج!)

 < script src =" https://cdn.tiagoboeing.com/anywhere-webcomponents/develop/anywhere-webcomponents/anywhere-webcomponents.js " > </ script >
< aw-button label =" Primary " mode =" square " color =" outline " status =" success " > </ aw-button >

بديل آخر هو استخدام unpkg ، لهذا ، الكتابة فوق عنوان URL التالي: https://unpkg.com/@tiagoboeing/anywhere-webcomponents@latest/dist/anywhere-webcomponents/anywhere-webcomponents.js

التطبيقات الزاوية

npm i @tiagoboeing/anywhere-webcomponents

في app.module.ts denare CUSTOM_ELEMENTS_SCHEMA :

 import { NgModule , CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' ;

@ NgModule ( {
  declarations : [
    AppComponent
  ] ,
  imports : [
    BrowserModule ,
    AppRoutingModule
  ] ,
  providers : [ ] ,
  bootstrap : [ AppComponent ] ,
  schemas : [ CUSTOM_ELEMENTS_SCHEMA ]   // <-- declare this
} )
export class AppModule { }

وفي main.ts الملف ، أضف الواردات التالية:

 import { applyPolyfills , defineCustomElements } from '@tiagoboeing/anywhere-webcomponents/loader' ;

defineCustomElements ( ) ;

// for IE support (optional)
applyPolyfills ( ) . then ( ( ) => {
  defineCustomElements ( )
} )

رد فعل التطبيقات

yarn add @tiagoboeing/anywhere-webcomponents

في ملف src/index.js أو src/index.tsx (project project) ، أضف الواردات التالية ويفضل أن يكون ذلك قبل عرض React:

 import { applyPolyfills , defineCustomElements } from '@tiagoboeing/anywhere-webcomponents/loader' ;

defineCustomElements ( ) ;

// for IE support (optional)
applyPolyfills ( ) . then ( ( ) => {
  defineCustomElements ( )
} ) 

حالة المكونات

انظر صفحة المشاريع لتتبع كل الحالة.

اريد المساهمة

عرض دليل المساهمة.

المساهمين

شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

تياجو بوينغ ؟ ؟ ؟

لوكاس سوزا ماتوس

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!