glue

Lem

Mungkin perpustakaan komponen web seluler lengkap seperti itu di China

memperkenalkan

Glue adalah pustaka komponen yang dibangun di atas komponen web. Ini benar-benar dapat menjalankan multi-framework pustaka komponen dalam kerangka kerja front-end seperti React, Vue2, Vue3, Angular dan HTML.

ciri

• Memberikan lebih dari 60 komponen berkualitas tinggi, mencakup berbagai skenario seluler
• Kinerja yang sangat baik
• Tingkat cakupan uji unit 90%+, memberikan jaminan stabilitas
• Lengkapi dokumen dan contoh Cina dan bahasa Inggris
• Mendukung semua platform
• Dukungan pengantar sesuai permintaan
• Mendukung kustomisasi tema
• Support TypeScript

Memasang

npm i glue-components -S

Mulailah dengan cepat

Gunakan di vue, lihat panduan untuk digunakan di vue di stensil

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

Bereaksi Panduan Penggunaan untuk Menggunakan Stensil

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

Gunakan dalam sudut, lihat panduan sudut untuk stensil

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

Gunakan di Ember, lihat Panduan Ember untuk Stensil

ember install ember-cli-stencil

Glue juga mendukung pengantar sesuai permintaan, pengantar CDN, dll. Untuk instruksi terperinci, silakan lihat dengan cepat.

Kode Kontribusi

Harap baca panduan pengembangan kami untuk memodifikasi kode.

Anda dapat menanyakan masalah apa pun selama penggunaan. Tentu saja, Anda juga sangat disambut untuk mengirimi kami PR.

Dukungan Browser

Browser Modern dan Android 4.0+, iOS 8.0+, Chrome 60+, Safari 10.1+, Firefox 63+, Edge 79+

Link

• Dokumentasi terperinci
• Perbarui log

Pratinjau seluler

Anda dapat memindai kode QR di ponsel Anda untuk mengakses demo seluler: dukungan selanjutnya

Grup Diskusi WeChat

Setiap orang dipersilakan untuk bergabung dengan Grup Komunikasi Lem untuk dibahas. Tambahkan WeChat di bawah ini dan tunjukkan "Bergabunglah dengan Grup Komunikasi Lem"

Protokol Sumber Terbuka

Proyek ini didasarkan pada protokol MIT, silakan nikmati dan berpartisipasi dalam open source dengan bebas.