glue

กาว

อาจเป็นห้องสมุดส่วนประกอบเว็บมือถือที่สมบูรณ์แบบแรกในประเทศจีน

แนะนำ

กาวเป็นไลบรารีส่วนประกอบที่สร้างขึ้นบนส่วนประกอบของเว็บ มันสามารถเรียกใช้ส่วนประกอบหลายส่วนประกอบของส่วนประกอบได้ในกรอบส่วนหน้าใด ๆ เช่น React, Vue2, Vue3, Angular และ HTML

ลักษณะ

• จัดเตรียมส่วนประกอบคุณภาพสูงมากกว่า 60 รายการครอบคลุมสถานการณ์มือถือต่างๆ
• ประสิทธิภาพที่ยอดเยี่ยม
• อัตราการทดสอบความครอบคลุมของหน่วย 90%+ให้การรับประกันเสถียรภาพ
• ทำเอกสารและตัวอย่างภาษาจีนและภาษาอังกฤษให้สมบูรณ์
• รองรับแพลตฟอร์มทั้งหมด
• สนับสนุนการแนะนำตามความต้องการ
• รองรับการปรับแต่งธีม
• รองรับ Typescript

ติดตั้ง

npm i glue-components -S

เริ่มต้นอย่างรวดเร็ว

ใช้ใน Vue โปรดดูคำแนะนำในการใช้ใน Vue ใน stencil

 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 โปรดดูคู่มือเชิงมุมสำหรับ stencil

 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 Guide for stencil

ember install ember-cli-stencil

กาวยังรองรับการแนะนำตามความต้องการการแนะนำ CDN ฯลฯ สำหรับคำแนะนำโดยละเอียดโปรดดูเริ่มต้นอย่างรวดเร็ว

รหัสผลงาน

โปรดอ่านคู่มือการพัฒนาของเราเพื่อแก้ไขรหัส

คุณสามารถถามปัญหาใด ๆ ระหว่างการใช้งานเรา แน่นอนว่าคุณยินดีเป็นอย่างยิ่งที่จะส่ง PR ให้เรา

การสนับสนุนเบราว์เซอร์

เบราว์เซอร์ที่ทันสมัยและ Android 4.0+, iOS 8.0+, Chrome 60+, Safari 10.1+, Firefox 63+, Edge 79+

การเชื่อมโยง

• เอกสารโดยละเอียด
• อัพเดทบันทึก

ตัวอย่างมือถือ

คุณสามารถสแกนรหัส QR บนโทรศัพท์มือถือของคุณเพื่อเข้าถึงการสาธิตมือถือ: การสนับสนุนที่ตามมา

กลุ่มสนทนา WeChat

ทุกคนยินดีที่จะเข้าร่วมกลุ่มการสื่อสารกาวเพื่อพูดคุย เพิ่ม WeChat ด้านล่างและระบุว่า "เข้าร่วมกลุ่มการสื่อสารกาว"

โปรโตคอลโอเพ่นซอร์ส

โครงการนี้ขึ้นอยู่กับโปรโตคอล MIT โปรดเพลิดเพลินและมีส่วนร่วมในโอเพ่นซอร์สอย่างอิสระ