매력적이고 강력하며 사용자 친화적 인 웹 애플리케이션을 구축 할 수 있도록 설계된 포괄적 인 각도 구성 요소 제품군 인 WindmillCode Angular Library에 오신 것을 환영합니다. WindmillCode Angular Component Development Kit (CDK)라고도하는이 라이브러리는 세부 사항과 성능에주의를 기울여 재사용 가능한 UI 구성 요소 모음을 제공합니다.
{/ * */}
Angular는 플러그 앤 플레이로 Angular를 단순화하는 것을 목표로하는 장악의 언어를 얻을 수 있습니다.
// app.component.ts
// Standalone there are default values to see how the component works
props = new WMLInputZeroProps ( { } )
// To pass arguments/customize
props = new WMLInputZeroProps ( {
datetime : new WMLInputZeroDatetimeProps ( {
type : "datetime" ,
min = new Date ( "[YOUR BIRTHDAY FOR EXAMPLE]" )
} )
} ) // app.component.html
< wml-input-zero [props] = props >
</ wml-input-zero >당사의 라이브러리에는 버튼 및 입력 필드와 같은 UI 요소에서 파일 업로드 및 드롭 다운과 같은 복잡한 구조에 이르기까지 다양한 구성 요소가 포함되어 있습니다. 각 구성 요소는 모듈 식으로 설계되었으므로 기존 각도 프로젝트에 쉽게 통합 할 수 있습니다.
구성 요소는 쉽게 사용자 정의 할 수 있고 그들을 쉽게 사용자 정의 할 수 있도록 설계되어 응용 프로그램의 브랜딩 및 설계 지침과 정렬 할 수 있습니다. VIA 각 구성 요소에 특정한 CSS 변수를 수정하면 구성 요소의 모양과 느낌을 입상 제어 할 수 있습니다.
{/ * */}
국제화 - 모든 구성 요소는 NGX -Translate에서 I18N 호환 가능합니다. 프로젝트에서 기본 en.json 파일을 사용하고 I18N 문자열을 업데이트하고 컴포넌트로 전달되는 소품의 적절한 키로 전달하십시오.
WindmillCode Angular Library는 각각의 각도 응용 분야에서 특정 UI 요구 사항을 충족하도록 설계된 다양한 범위의 구성 요소를 제공합니다. 아래는 간단한 설명과 함께 사용 가능한 구성 요소 목록입니다.
이것은 전체 도서관이 초점을 맞춘 기초 패키지입니다. 그 기초는 WMLUIPROPERTY입니다. angular뿐만 아니라 모든 JavaScript 프레임 워크에 사용되는 모든 응용 프로그램의 기본 빌딩 블록입니다. 여기에서 페이지 매김, 애니메이션, 동적 구성 요소 등의 기초가 구축됩니다.
Angular 개발자를 위해 양육권을 기준으로 WML 구성 요소를 확장합니다. 코드베이스 내에서 적합성을 유지하는 데 유용합니다.
3 개의 JS가 다소 휘말립니다. 장면을 만들기 위해 필요한 모든 것이 당신을 위해 거기에있는 것은 아닙니다. Three.JS 라이브러리로 변경됩니다. 우리의 수업은 수학 및 물리 구현을 처리하여 장면에 객체를 추가하고 배치하는 데 집중할 수 있습니다.
각도 프로젝트 템플릿에 따라 각도 클래스를 생성하기위한 우리 자신의 각도 개략도
콘텐츠를 접을 수있는 형식으로 표시 할 수있는 아코디언 구성 요소. FAQ, 목록 또는 소형 프레젠테이션의 혜택을받는 컨텐츠에 유용합니다.
응용 프로그램에서 사용할 수있는 사용자 정의 가능한 버튼 구성 요소로 일관성과 이성을 보장합니다.
갤러리에 적합하거나 여러 제품을 전시하는 데 적합한 슬라이딩 또는 회전 방식으로 여러 품목을 표시 할 수있는 회전식 구성 요소입니다.
태그, 접촉 정보 또는 대화식 요소에 일반적으로 사용되는 입력, 속성 또는 작용을 나타내는 구성 요소.
잠재적으로 양식을위한 필드 구성 요소는 데이터를 입력하는 표준화 된 방법을 제공합니다.
업로드, 다운로드 (백 로그) 및 파일 정보 표시 등 파일 상호 작용을 처리하기위한 포괄적 인 구성 요소.
다양한 양식 컨트롤을 포함하여 일관되고 기능적인 형태를 생성하도록 설계된 구성 요소 또는 구성 요소 세트.
무한히 확장되는 드롭 다운 구성 요소. 많은 양의 내비게이션 컨텐츠로 메뉴에 적합합니다.
양식의 다목적 입력 구성 요소로 사용자 입력을 수집하는 균일 한 방법을 제공합니다.
모바일 사용자 인터페이스를 위해 특별히 설계된 내비게이션 구성 요소로 작은 화면에 최적화 된 메뉴를 제공합니다.
알림 구성 요소, 사용자에게 경고, 메시지 또는 기타 중요한 정보를 표시 할 수 있습니다.
보다 고급 드롭 다운 또는 선택 구성 요소로 선택 가능한 옵션 세트를 제공하는 구성 요소.
대시 보드 또는 복잡한 인터페이스의 일부로 사용되는 보조 컨텐츠, 정보 또는 컨트롤을 제공하는 데 사용되는 플라이 아웃 구성 요소 구성 요소.
사용자 정의로드 구성 요소
모달, 대화 또는 툴팁과 같은 팝업 컨텐츠를 표시하기위한 구성 요소.
사용자가 선택할 수있는 드롭 다운 옵션 목록을 제공하는 선택 구성 요소.
jQuery Slicebox 기반 회전 목마 구현보다 유동적 인 방법을 기반으로합니다.
정렬, 필터링 및 페이지 매김을 포함한 기능을 갖춘 테이블 데이터를 표시하도록 설계된 테이블 구성 요소.
탭 인터페이스를 작성하기위한 구성 요소로, 사용자는 동일한 컨텍스트 내에서 다른 뷰 또는 컨텐츠 섹션을 전환 할 수 있습니다.
전환 스위치 구성 요소는 사용자가 설정 활성화/비활성화와 같은 이진을 선택할 수있는 직관적 인 방법을 제공합니다.
각 구성 요소는 특정 UI 요구를 해결하기 위해 제작되면서 각도 프로젝트에 일관성과 통합을 쉽게 통합 할 수 있습니다. 사용 예제 및 구성 옵션을 포함하여 각 구성 요소에 대한 자세한 정보는 라이브러리의 자세한 문서를 참조하십시오.
각 구성 요소는 사용 방법, 입력/출력 속성 및 이벤트 이미 터에 대한 세부 정보가 포함되어 있습니다. 특정 구성 요소에 대해 자세히 설명하려면 ReadMe.md 전용 문서 섹션을 참조하십시오.
** 진행중인 작업 ** 풍차 코드 앵귤러 라이브러리에 대한 기여를 환영합니다! 새로운 구성 요소를 추가하거나 기존 구성 요소를 향상 시키거나 버그를보고하든 귀하의 기여는 우리에게 가치가 있습니다. 풀 요청을하기 전에 기여 지침을 참조하십시오.
cd projects/[desired project]
npx ng build --watch # wait for project to appear in dist
cd dist/[desired project]
npm link소비자에서는 소비자의 Dist 로의 경로를 추가해야합니다. Tsconfig.json
"[FULL LIBRARY NAME FROM PACKAGE.JSON]" : [
" [PATH TO REPO GENERATED DIST]/[LIBRAY FOLDER NAME] "
],
// EXAMPLE
"@windmillcode/angular-wml-slicebox" : [
" ../../../../windmillcode-Angular-CDK/dist/wml-slicebox "
],풍차 코드 각도 라이브러리는 MIT 라이센스가 부여되었습니다.
궁금한 점이나 피드백이 있으시면 Discord에 참여하십시오. 우리는 항상 도서관을 개선하고 개발자 커뮤니티를 돕고 자합니다.
풍차 코드 각도 라이브러리로 건물을 즐기십시오!