glue

아교

아마도 중국에서 최초의 완전한 모바일 웹 구성 요소 도서관

소개하다

접착제는 웹 구성 요소를 기반으로 구축 된 구성 요소 라이브러리입니다. React, Vue2, Vue3, Angular 및 HTML과 같은 모든 프론트 엔드 프레임 워크에서 구성 요소 라이브러리 멀티 프레임 워크를 실행할 수 있습니다.

특성

• 다양한 모바일 시나리오를 다루는 60 개 이상의 고품질 구성 요소를 제공합니다.
• 우수한 성능
• 단위 테스트 적용 범위 90%+, 안정성 보증을 제공합니다
• 중국어 및 영어 문서 및 예제를 완료하십시오
• 모든 플랫폼을 지원합니다
• 주문형 소개 지원
• 테마 사용자 정의를 지원합니다
• 지원 TypeScript

설치하다

npm i glue-components -S

빨리 시작하십시오

vue에서 사용하려면 스텐실에서 Vue에서 사용하려면 안내서를 참조하십시오.

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

스텐실 사용을위한 사용 안내서를 반응합니다

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

각도에서 사용, 스텐실의 각도 안내서를 참조하십시오.

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

Ember에서 사용, Stencil 용 Ember 안내서를 참조하십시오.

ember install ember-cli-stencil

Glue는 또한 주문형 소개, CDN 소개 등을 지원합니다. 자세한 지침은 신속하게 시작하십시오.

기여 코드

코드를 수정하려면 개발 안내서를 읽으십시오.

사용하는 동안 어떤 문제도 우리에게 물어볼 수 있습니다. 물론, 당신은 또한 우리에게 PR을 보내 주셔서 매우 환영합니다.

브라우저 지원

현대식 브라우저 및 Android 4.0+, iOS 8.0+, Chrome 60+, Safari 10.1+, Firefox 63+, Edge 79+

링크

• 자세한 문서
• 로그 업데이트

모바일 미리보기

휴대폰에서 QR 코드를 스캔하여 모바일 데모에 액세스 할 수 있습니다.

Wechat 토론 그룹

모든 사람은 접착제 통신 그룹에 가입하여 논의 할 수 있습니다. 아래에 wechat을 추가하고 "접착제 통신 그룹 가입"을 표시하십시오.

오픈 소스 프로토콜

이 프로젝트는 MIT 프로토콜을 기반으로하며 오픈 소스를 자유롭게 즐기고 참여하십시오.