anywhere webcomponents

Weer Web组件

演示在这里|路线图

该项目正在进行中。请参阅项目页面以跟踪所有状态。

设计系统和规格仍然是开放的，但应以Nebular，Bootstrap和Tailwind为灵感。

给予反馈

写有关设计系统的评论，给予您的反馈！

浏览器支持

铬合金	新边缘（铬）	野生动物园	Firefox	较旧的边缘	IE
60+	79+	10.1+	63+	16-18（多填充）	> = 11（polyfills）

请参阅完整的文档

如何安装

NPM

安装依赖性：

npm i @tiagoboeing/anywhere-webcomponents

并导入anywhere-webcomponents.js ：

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

要在框架中使用，请参阅“模板”页面。

通过CDN（释放候选者）

现在，您可以在HTML页面中测试组件，该页面通过CDN导入的脚本导入。

稳定的

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

释放候选人（开发分支）

（注意！不用于生产！）

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

另一种选择是使用UNPKG，为此，使用以下URL： https://unpkg.com/@tiagoboeing/anywhere-webcomponents@latest/dist/anywhere-webcomponents/anywhere-webcomponents.js

角应用

npm i @tiagoboeing/anywhere-webcomponents

在您的app.module.ts在声明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 { }

在文件main.ts ，添加以下导入：

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

defineCustomElements ( ) ;

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

反应应用

yarn add @tiagoboeing/anywhere-webcomponents

在您的src/index.js或src/index.tsx （typescript项目）文件中，最好在React Render之前添加以下导入：

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

defineCustomElements ( ) ;

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

组件状态

请参阅项目页面以跟踪所有状态。

我想贡献

查看贡献指南。

贡献者

谢谢这些好人（表情符号钥匙）：

蒂亚戈波音 ？ ？ ？

卢卡斯·苏扎·马托斯（Lucas Souza Matos）

该项目遵循全企业规范。欢迎任何形式的贡献！