Скачать glue - glue исходный код скачать

glue

Сторонние компоненты

1.0.0

Скачать

Клей

Вероятно, первая такая полная библиотека мобильных веб -компонентов в Китае

представлять

Клей - это библиотека компонентов, построенная на веб -компонентах. Он может по-настоящему запустить многократные компонентные библиотеки в любых фронтальных структурах, таких как React, Vue2, Vue3, Angular и HTML.

характеристика

Предоставляет более 60 высококачественных компонентов, охватывающих различные мобильные сценарии
Отличная производительность
Скорость покрытия модульных тестов 90%+, обеспечивая гарантию стабильности
Полные китайские и английские документы и примеры
Поддерживает все платформы
Поддержка по требованию введение
Поддерживает настройку темы
Support 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 >
  )
}

Используйте в угловом, обратитесь к Angular Guide для трафарета

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