glue

غراء

ربما أول مكتبة مكونات ويب محمول كاملة في الصين

يقدم

Glue هي مكتبة مكون مبنية على مكونات الويب. يمكن أن تدير حقًا مكتبة مكونة متعددة الأرواح في أي إطار أمامي مثل React و Vue2 و Vue3 و Angular و HTML.

خاصية

• يوفر أكثر من 60 مكونًا عالي الجودة ، يغطي سيناريوهات متنقلة مختلفة
• أداء ممتاز
• معدل تغطية اختبار الوحدة 90 ٪+، مما يوفر ضمان الاستقرار
• أكمل الوثائق والأمثلة الصينية والإنجليزية
• يدعم جميع المنصات
• الدعم مقدمة عند الطلب
• يدعم تخصيص الموضوع
• دعم TypeScript

ثَبَّتَ

npm i glue-components -S

ابدأ بسرعة

استخدم في Vue ، راجع الدليل للاستخدام في Vue في الاستنسل

 import Vue from 'vue' ;
import App from './App.vue' ;
import "glue-components/dist/glue-components/glue-components.css" ;
import { applyPolyfills , defineCustomElements } from 'glue-components/loader' ;

Vue . config . productionTip = false ;

// Tell Vue to ignore all components defined in the glue-components
// package. The regex assumes all components names are prefixed
// 'test'
Vue . config . ignoredElements = [ / test-w* / ] ;

// Bind the custom elements to the window object
applyPolyfills ( ) . then ( ( ) => {
  defineCustomElements ( ) ;
} ) ;

new Vue ( {
  render : h => h ( App )
} ) . $mount ( '#app' ) ; 

 render ( ) {
  return (
    < div >
      < glue-button > </ glue-button >
    </ div >
  )
}

دليل الاستخدام رد فعل لاستخدام الاستنسل

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
import App from './App' ;
import "glue-components/dist/glue-components/glue-components.css" ;
import registerServiceWorker from './registerServiceWorker' ;

// test-component is the name of our made up web components that we have
// published to npm:
import { applyPolyfills , defineCustomElements } from 'glue-components/loader' ;

ReactDOM . render ( < App /> , document . getElementById ( 'root' ) ) ;
registerServiceWorker ( ) ;

applyPolyfills ( ) . then ( ( ) => {
  defineCustomElements ( ) ;
} ) ; 

 render ( ) {
  return (
    < div >
      < glue-button > </ glue-button >
    </ div >
  )
}

استخدم في الزاوي ، راجع الدليل الزاوي للاستنسل

 import { enableProdMode } from '@angular/core' ;
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' ;

import { AppModule } from './app/app.module' ;
import { environment } from './environments/environment' ;

// Note: loader import location set using "esmLoaderPath" within the output target config
import { defineCustomElements } from 'glue-components/loader' ;

if ( environment . production ) {
  enableProdMode ( ) ;
}

platformBrowserDynamic ( ) . bootstrapModule ( AppModule )
  . catch ( err => console . log ( err ) ) ;
defineCustomElements ( ) ; 

 import { Component , ElementRef , ViewChild } from '@angular/core' ;

import 'glue-components' ;

@ Component ( {
    selector : 'app-home' ,
    template : `<glue-button #test></glue-button>` ,
    styleUrls : [ './home.component.scss' ] ,
} )
export class HomeComponent {

    @ ViewChild ( 'test' ) myGlueButtonComponent : ElementRef < HTMLTestComponentElement > ;

    async onAction ( ) {
        await this . myGlueButtonComponent . nativeElement . testComponentMethod ( ) ;
    }
}

استخدم في ember ، راجع دليل ember للاستنسل

ember install ember-cli-stencil

يدعم Glue أيضًا مقدمة عند الطلب ، مقدمة CDN ، إلخ. للحصول على تعليمات مفصلة ، يرجى الاطلاع على البدء بسرعة.

رمز المساهمة

يرجى قراءة دليل التطوير الخاص بنا لتعديل الرمز.

يمكنك أن تسألنا أي مشاكل أثناء الاستخدام. بالطبع ، نرحب جدًا أيضًا بإرسال العلاقات العامة إلينا.

دعم المتصفح

المتصفحات الحديثة و Android 4.0+ ، iOS 8.0+ ، Chrome 60+ ، Safari 10.1+ ، Firefox 63+ ، Edge 79+

وصلة

• وثائق مفصلة
• تحديث سجل

معاينة الهاتف المحمول

يمكنك مسح رمز الاستجابة السريعة على هاتفك المحمول للوصول إلى العرض التوضيحي للجوال: الدعم اللاحق

مجموعة مناقشة WeChat

الجميع مدعوون للانضمام إلى مجموعة الاتصالات الغراء لمناقشة. أضف WeChat أدناه وأشار إلى "انضم إلى مجموعة الاتصالات الغراء"

بروتوكول مفتوح المصدر

يعتمد هذا المشروع على بروتوكول MIT ، يرجى الاستمتاع والمشاركة في المصدر المفتوح بحرية.