anywhere webcomponents

어디서나 웹 구성 요소

여기 데모 | 로드맵

이 프로젝트는 진행중인 작업입니다. 모든 상태를 추적하려면 프로젝트 페이지를 참조하십시오.

디자인 시스템과 사양은 여전히 열려 있지만 성운, 부트 스트랩 및 테일 윈드에서 영감을 받아야합니다.

피드백을 제공하십시오

디자인 시스템에 대한 의견을 작성하고 피드백을 제공하십시오!

브라우저 지원

크롬	새로운 에지 (크롬)	원정 여행	파이어 폭스	더 오래된 가장자리	즉
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 >

다른 대안은 UNBKG를 사용하는 것입니다.이를 위해서는 다음 URL을 사용하여 https://unpkg.com/@tiagoboeing/anywhere-webcomponents@latest/dist/anywhere-webcomponents/anywhere-webcomponents.js 로 덮어 쓰는 것입니다.

각도 응용

npm i @tiagoboeing/anywhere-webcomponents

app.module.ts delemare 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 ( )
} ) 

구성 요소 상태

모든 상태를 추적하려면 프로젝트 페이지를 참조하십시오.

나는 기여하고 싶다

기여 가이드보기.

기고자

이 멋진 사람들에게 감사합니다 (이모티콘 키) :

티아고 보잉 ? ? ?

Lucas Souza Matos

이 프로젝트는 All-Contritors 사양을 따릅니다. 모든 종류의 공헌을 환영합니다!