wokwi elements

ウォクウィ要素

Arduinoや各種電子部品用のWebコンポーネント。

コンポーネントカタログをご覧ください。

注: これらの要素は、表現されたハードウェアのプレゼンテーションと表示を提供するだけです。ハードウェアの機能シミュレーション コードは提供されません。それは、これらを使用するアプリケーション (シミュレーター) に依存するため、作成するのはあなた次第です。

Wokwi 要素の使用

npmを使用してパッケージをインストールし、それをコードにインポートできます。

 import '@wokwi/elements' ;

あるいは、unpkg の CDN から Wokwi Elements バンドルをロードすることもできます。

 < script src =" https://unpkg.com/@wokwi/[email protected]/dist/wokwi-elements.bundle.js " > </ script >

0.48.3 を最新のバージョン番号に置き換えます。すべてのバージョンのリストはリリース ページで見つけることができます。

地域発展

ローカル開発の準備をするには、このリポジトリのクローンを作成し、依存関係をインストールします。

 npm install

次に、ストーリーブックを開始します。

 npm run storybook

これにより、http://localhost:6006 でローカル開発サーバーが開き、https://elements.wokwi.com と同様に、要素を操作して変更をライブで確認できます。

新しい要素の作成

新しい要素を作成する最も簡単な方法は、ジェネレーターを実行することです。

 npm run new-element --name demo

これにより、 demoという新しい要素が生成されます。また、ストーリーブック ファイルも作成されるため、ストーリーブックで新しい要素を確認できるようになります (上記の「ローカル開発」セクションを参照)。

注: コード内の docstring を更新しても、Storybook を再起動するか、次のコマンドを手動で実行してページを更新しない限り、Storybook の [ドキュメント] タブには反映されません。

 npm run analyze-components

詳細については、貢献ガイドをご覧ください。

要素の作成方法を学ぶ

ビデオチュートリアル

Membrane キーパッド要素のライブ コーディング チュートリアルでは、要素作成の背後にある完全なプロセス (調査、描画、コード/ストーリーの作成) を順を追って説明します。

ブログ投稿

• SVG と <lit-element> を使用して Arduino プッシュボタンを再作成する
• Arduino OLED ディスプレイを Web コンポーネントに変える

ライセンス

Wokwi Elements は MIT ライセンスに基づいてリリースされています。