wokwi elements

워퀴엘리먼트

Arduino 및 각종 전자부품용 Web Components입니다.

구성요소 카탈로그를 확인하세요.

참고: 이러한 요소는 표시된 하드웨어의 표시 및 표시만 제공합니다. 하드웨어의 기능적 시뮬레이션 코드를 제공하지 않습니다. 이는 이를 사용하려는 응용 프로그램(시뮬레이터)에 따라 다르므로 생성하는 것은 사용자에게 달려 있습니다.

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

그러면 https://elements.wokwi.com과 유사하게 요소와 상호 작용하고 변경 사항을 실시간으로 볼 수 있는 http://localhost:6006에서 로컬 개발 서버가 열립니다.

새 요소 만들기

새 요소를 생성하는 가장 쉬운 방법은 생성기를 실행하는 것입니다.

 npm run new-element --name demo

그러면 demo 라는 새 요소가 생성됩니다. 또한 스토리북 파일도 생성되므로 스토리북에서 새로운 요소를 볼 수 있습니다(위의 "로컬 개발" 섹션 참조).

참고: 코드의 독스트링 업데이트는 Storybook을 다시 시작하거나 다음 명령을 수동으로 실행하고 페이지를 새로 고치지 않는 한 Storybook의 Docs 탭에 반영되지 않습니다.

 npm run analyze-components

자세한 내용은 기여 가이드를 확인하세요.

요소를 만드는 방법 알아보기

비디오 튜토리얼

Membrane 키패드 요소 라이브 코딩 튜토리얼은 요소 생성 뒤의 전체 프로세스(조사, 그리기, 코드/스토리 작성)를 안내합니다.

블로그 게시물

• SVG 및 <lit-element>를 사용하여 Arduino 푸시버튼 재생성
• Arduino OLED 디스플레이를 웹 구성 요소로 전환

특허

Wokwi Elements는 MIT 라이센스에 따라 출시됩니다.