Téléchargement anywhere webcomponents - anywhere webcomponents Téléchargement du code source

anywhere webcomponents

Composants tiers

1.0.0

Télécharger

Des composants Web n'importe où

Démo ici | Feuille de route

Ce projet est un travail en cours. Voir la page des projets pour suivre tous les statuts.

Le système de conception et les spécifications sont toujours ouverts, mais doivent être inspirés en nébulaire, en bootstrap et en ventant.

Donner des commentaires

Écrivez un commentaire sur le système de conception, donnez vos commentaires!

Support de navigateur

Chrome	Nouveau bord (chrome)	Safari	Incendier	Bord plus ancien	C'est-à-dire
60+	79+	10.1+	63+	16-18 (polyfills)	> = 11 (polyfills)

Voir les documents complets

Comment installer

NPM

Installez la dépendance:

npm i @tiagoboeing/anywhere-webcomponents

Et importer anywhere-webcomponents.js :

 < script src = "@tiagoboeing/anywhere-webcomponents/dist/anywhere-webcomponents/anywhere-webcomponents.js" > </ script >

Pour une utilisation dans des cadres, consultez la page du pochoir.

Via CDN (publication du candidat)

Vous pouvez maintenant tester des composants dans une page HTML important via le script de CDN.

Écurie

 < script src =" https://cdn.tiagoboeing.com/anywhere-webcomponents/master/anywhere-webcomponents/anywhere-webcomponents.js " > </ script >
< aw-button label =" Primary " mode =" square " color =" outline " status =" success " > </ aw-button >

Libérer le candidat (développez la branche)

(Attention !! pas d'utilisation pour la production!)

 < script src =" https://cdn.tiagoboeing.com/anywhere-webcomponents/develop/anywhere-webcomponents/anywhere-webcomponents.js " > </ script >
< aw-button label =" Primary " mode =" square " color =" outline " status =" success " > </ aw-button >

L'autre alternative est l'utilisation de UNPKG, pour cela, d'écraser avec l'URL suivante: https://unpkg.com/@tiagoboeing/anywhere-webcomponents@latest/dist/anywhere-webcomponents/anywhere-webcomponents.js

Applications angulaires

npm i @tiagoboeing/anywhere-webcomponents

Dans votre app.module.ts déclarez CUSTOM_ELEMENTS_SCHEMA :

 import { NgModule , CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' ;

@ NgModule ( {
  declarations : [
    AppComponent
  ] ,
  imports : [
    BrowserModule ,
    AppRoutingModule
  ] ,
  providers : [ ] ,
  bootstrap : [ AppComponent ] ,
  schemas : [ CUSTOM_ELEMENTS_SCHEMA ]   // <-- declare this
} )
export class AppModule { }

Et dans la fin du fichier main.ts , ajoutez les importations suivantes:

 import { applyPolyfills , defineCustomElements } from '@tiagoboeing/anywhere-webcomponents/loader' ;

defineCustomElements ( ) ;

// for IE support (optional)
applyPolyfills ( ) . then ( ( ) => {
  defineCustomElements ( )
} )

Réagir les applications

yarn add @tiagoboeing/anywhere-webcomponents

Dans votre fichier src/index.js ou src/index.tsx (TypeScript Project), ajoutez les importations suivantes de préférence avant le rendu React:

 import { applyPolyfills , defineCustomElements } from '@tiagoboeing/anywhere-webcomponents/loader' ;

defineCustomElements ( ) ;

// for IE support (optional)
applyPolyfills ( ) . then ( ( ) => {
  defineCustomElements ( )
} )