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）

該項目遵循全企業規範。歡迎任何形式的貢獻！