glue

Cola

Provavelmente a primeira biblioteca completa da Web Mobile Web na China

introduzir

A cola é uma biblioteca de componentes criada nos componentes da web. Ele pode realmente executar uma biblioteca de componentes multi-quadrowork em qualquer estrutura front-end, como React, VUE2, VUE3, Angular e HTML.

característica

• Fornece mais de 60 componentes de alta qualidade, cobrindo vários cenários móveis
• Excelente desempenho
• Taxa de cobertura do teste de unidade 90%+, fornecendo garantia de estabilidade
• Documentos e exemplos completos de chinês e inglês
• Suporta todas as plataformas
• Apoie a introdução sob demanda
• Suporta a personalização do tema
• Suporte TypeScript

Instalar

npm i glue-components -S

Comece rapidamente

Use em Vue, consulte o Guia para usar em Vue em estêncil

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

Guia de uso de reagir para usar o estêncil

 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 em Angular, consulte o guia angular para estêncil

 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 em Ember, consulte o guia Ember para estêncil

ember install ember-cli-stencil

A Glue também suporta introdução sob demanda, introdução da CDN, etc. Para instruções detalhadas, consulte Comece rapidamente.

Código de contribuição

Leia nosso guia de desenvolvimento para modificar o código.

Você pode nos perguntar algum problema durante o uso. Claro, você também é muito bem -vindo para nos enviar um PR.

Suporte do navegador

Navegadores modernos e Android 4.0+, iOS 8.0+, Chrome 60+, Safari 10.1+, Firefox 63+, Edge 79+

Link

• Documentação detalhada
• Atualizar log

Visualização móvel

Você pode digitalizar o código QR no seu telefone celular para acessar a demonstração móvel: suporte subsequente

Grupo de discussão do WeChat

Todos podem se juntar ao grupo de comunicação de cola para discutir. Adicione o WeChat abaixo e indique "junte -se ao grupo de comunicação de cola"

Protocolo de código aberto

Este projeto é baseado no protocolo MIT, aproveite e participe livremente de código aberto.