anywhere webcomponentsダウンロードanywhere webcomponentsソースコードのダウンロード

anywhere webcomponents

サードパーティ製コンポーネント

1.0.0

ダウンロード

どこでもWebコンポーネント

ここにデモ|ロードマップ

このプロジェクトは進行中の作業です。すべてのステータスを追跡するプロジェクトページを参照してください。

設計システムと仕様はまだ開いていますが、星雲、ブートストラップ、テールワインドにインスピレーションを与える必要があります。

フィードバックを与えます

デザインシステムについてのコメントを書いて、フィードバックを与えてください！

ブラウザのサポート

クロム	新しいエッジ（クロム）	サファリ	Firefox	古いエッジ	すなわち
60+	79+	10.1+	63+	16-18（ポリフィル）	> = 11（ポリフィル）

完全なドキュメントを参照してください

インストール方法

npm

依存関係をインストール：

npm i @tiagoboeing/anywhere-webcomponents

anywhere-webcomponents.jsインポート：

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

フレームワークで使用するには、ステンシルページを参照してください。

cdn（リリース候補）を介して

これで、CDNからスクリプトを介してインポートするHTMLページでコンポーネントをテストできます。

安定した

 < 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 Project）ファイルで、できれば反応レンダリングの前に次のインポートを追加します。

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

defineCustomElements ( ) ;

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