glue

Colle

Probablement la première bibliothèque de composants Web mobiles mobiles complets en Chine

introduire

Glue est une bibliothèque de composants construite sur des composants Web. Il peut vraiment exécuter une bibliothèque de composants multi-trames dans n'importe quel cadre frontal tel que React, Vue2, Vue3, Angular et HTML.

caractéristiques

• Fournit plus de 60 composants de haute qualité, couvrant divers scénarios mobiles
• Excellente performance
• Taux de couverture des tests unitaires 90% +, offrant une garantie de stabilité
• Compléter les documents et exemples chinois et anglais
• Prend en charge toutes les plateformes
• Support Introduction à la demande
• Prend en charge la personnalisation du thème
• Prise en charge de la dactylographie

Installer

npm i glue-components -S

Commencez rapidement

Utiliser dans Vue, reportez-vous au guide à utiliser dans Vue en pochoir

 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 >
  )
}

Guide d'utilisation de la réaction pour l'utilisation du pochoir

 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 >
  )
}

Utiliser dans Angular, reportez-vous au guide angulaire du pochoir

 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 ( ) ;
    }
}

Utiliser dans Ember, reportez-vous au Guide Ember pour le pochoir

ember install ember-cli-stencil

Glue prend également en charge l'introduction à la demande, l'introduction CDN, etc. Pour des instructions détaillées, veuillez consulter rapidement.

Code de contribution

Veuillez lire notre guide de développement pour modifier le code.

Vous pouvez nous poser des problèmes pendant l'utilisation. Bien sûr, vous êtes également très invités à nous envoyer un RP.

Support de navigateur

Browsers modernes et Android 4.0+, iOS 8.0+, Chrome 60+, Safari 10.1+, Firefox 63+, Edge 79+

Lien

• Documentation détaillée
• Mettre à jour le journal

Aperçu mobile

Vous pouvez scanner le code QR sur votre téléphone mobile pour accéder à la démo mobile: support ultérieur

Groupe de discussion WeChat

Tout le monde est invité à rejoindre le groupe de communication Glue pour discuter. Ajoutez WeChat ci-dessous et indiquez "Rejoignez le groupe de communication de colle"

Protocole open source

Ce projet est basé sur le protocole du MIT, veuillez profiter et participer librement à l'open source.