glue

Kleber

Wahrscheinlich die erste derartige Bibliothek für mobile Webkomponenten in China

einführen

Kleber ist eine Komponentenbibliothek, die in Webkomponenten aufgebaut ist. In jedem Front-End-Framework wie React, VUE2, VUE3, Angular und HTML kann eine Komponentenbibliothek wirklich ausgeführt werden.

Merkmal

• Bietet mehr als 60 qualitativ hochwertige Komponenten und deckt verschiedene mobile Szenarien ab
• Hervorragende Leistung
• Unit -Testabdeckungsrate 90%+, die Stabilitätsgarantie liefert
• Vervollständigen Sie chinesische und englische Dokumente und Beispiele
• Unterstützt alle Plattformen
• Unterstützung On-Demand-Einführung
• Unterstützt Themenanpassung
• Unterstützen Sie Typenkript

Installieren

npm i glue-components -S

Fangen Sie schnell an

Verwenden Sie in VUE den Leitfaden zur Verwendung in Vue in Schablone

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

Reagieren Sie die Nutzungsanleitung für die Verwendung der Schablone

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

Die Verwendung in Angular finden Sie in der Winkelführung für Schablone

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

Die Verwendung in Ember finden Sie im Ember -Leitfaden für Schablone

ember install ember-cli-stencil

Der Kleber unterstützt auch die Einführung von On-Demand, CDN-Einführung usw. Für detaillierte Anweisungen finden Sie unter Erste Schritte schnell.

Beitragscode

Bitte lesen Sie unseren Entwicklungshandbuch, um den Code zu ändern.

Sie können uns beim Gebrauch Probleme bitten. Natürlich können Sie uns auch einen PR schicken.

Browserunterstützung

Moderne Browser und Android 4.0+, iOS 8.0+, Chrome 60+, Safari 10.1+, Firefox 63+, Edge 79+

Link

• Detaillierte Dokumentation
• Aktualisieren Sie das Protokoll

Mobile Vorschau

Sie können den QR -Code auf Ihrem Mobiltelefon scannen, um auf die mobile Demo zuzugreifen: anschließende Unterstützung

Wechat -Diskussionsgruppe

Jeder ist herzlich eingeladen, sich der Kommunikationsgruppe der Kleber anzuschließen, um zu diskutieren. Fügen Sie WeChat unten hinzu und geben Sie an, dass "die Kommunikationsgruppe der Kleber -Kommunikation beitreten".

Open -Source -Protokoll

Dieses Projekt basiert auf dem MIT -Protokoll, bitte genießen und nehmen Sie frei an Open Source teil.