glue

のり

おそらく中国で最初のそのような完全なモバイルWebコンポーネントライブラリ

導入

接着剤は、Webコンポーネント上に構築されたコンポーネントライブラリです。 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 >
  )
}

ステンシルを使用するためのReact使用ガイド

 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で使用するには、ステンシルの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 ( ) ;
    }
}

Emberで使用するには、ステンシルのEmberガイドを参照してください

ember install ember-cli-stencil

接着剤は、オンデマンドの紹介、CDNの紹介などもサポートします。詳細な手順については、迅速に開始してください。

貢献コード

コードを変更するには、開発ガイドをお読みください。

使用中は問題を尋ねることができます。もちろん、PRをお送りください。

ブラウザのサポート

最新のブラウザーとAndroid 4.0+、iOS 8.0+、Chrome 60+、Safari 10.1+、Firefox 63+、Edge 79+

リンク

• 詳細なドキュメント
• ログを更新します

モバイルプレビュー

携帯電話のQRコードをスキャンして、モバイルデモにアクセスできます。

Wechatディスカッショングループ

Glue Communication Groupに参加して議論することをお勧めします。以下にwechatを追加し、「接着剤コミュニケーショングループに参加」を示します

オープンソースプロトコル

このプロジェクトはMITプロトコルに基づいています。オープンソースを自由に楽しんで参加してください。