glue

Pegamento

Probablemente la primera biblioteca de componentes web móviles completos en China

introducir

Glue es una biblioteca de componentes construida en componentes web. Realmente puede ejecutar una biblioteca de componentes múltiples marco en cualquier marco front-end, como React, Vue2, Vue3, Angular y HTML.

característica

• Proporciona más de 60 componentes de alta calidad, que cubren varios escenarios móviles
• Excelente rendimiento
• Tasa de cobertura de prueba unitaria 90%+, proporcionando garantía de estabilidad
• Completos documentos y ejemplos chinos e ingleses
• Admite todas las plataformas
• Apoyo a la introducción a pedido
• Admite la personalización del tema
• Soporte de mecanografiado

Instalar

npm i glue-components -S

Empiece a comenzar rápidamente

Usar en Vue, consulte la Guía para usar en Vue en plantilla

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

React Guía de uso para usar plantilla

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

Use en angular, consulte la guía angular para la plantilla

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

Use en Ember, consulte la Guía de Ember para la plantilla

ember install ember-cli-stencil

El pegamento también admite la introducción a pedido, la introducción de CDN, etc. Para obtener instrucciones detalladas, consulte Comenzar rápidamente.

Código de contribución

Lea nuestra guía de desarrollo para modificar el código.

Puede preguntarnos cualquier problema durante el uso. Por supuesto, también puede enviarnos un PR.

Soporte del navegador

Browsers modernos y Android 4.0+, iOS 8.0+, Chrome 60+, Safari 10.1+, Firefox 63+, Edge 79+

Enlace

• Documentación detallada
• Registro de actualizaciones

Vista previa móvil

Puede escanear el código QR en su teléfono móvil para acceder a la demostración móvil: soporte posterior

Grupo de discusión de WeChat

Todos son bienvenidos a unirse al Grupo de Comunicación de Glue para discutir. Agregue WeChat a continuación e indique "une al grupo de comunicación de pegamento"

Protocolo de código abierto

Este proyecto se basa en el protocolo MIT, disfrute y participe en código abierto libremente.