esl

Exadel Smart Library

Exadel Smart Library ( ESL )는 웹 구성 요소를 기반으로 한 오픈 소스 경량 및 유연한 UI 구성 요소 라이브러리입니다. 라이브러리에서 사용자 정의 구성 요소로 UX 모델을 구축하여 사이트의 성능을 향상시킵니다. ESL Web UI 구성 요소 라이브러리는 모든 프레임 워크와 호환되므로 ESL은 기술 스택에 관계없이 프로젝트에 이상적입니다.

★ UI 구성 요소 라이브러리를 확인하고별로 지원하십시오 ★

• 개요
• 라이브러리 구조
• 설치 안내서
• 기고자를위한 개발 정보

개요

Exadel Smart Library 또는 ESL은 무료 웹 UI 구성 요소 라이브러리로 일상적인 작업을 줄이고 여러 웹 구성 요소를 사용하여 웹 사이트를 효율적으로 생성 할 수 있습니다. 사이트에 가장 적합한 UI 구성 요소 라이브러리를 결정할 때는 ESL과 같은 다른 라이브러리 및 프레임 워크와 호환되어야합니다.

ESL UI 구성 요소 라이브러리를 사용하면 재사용 가능한 구성 요소로 가득 찬 툴킷에 액세스 할 수 있습니다. 이러한 웹 구성 요소를 활용하여 ESL 만 사용하여 프로젝트를 보완하거나 인프라를 구축 할 수 있습니다. 당사의 웹 UI 구성 요소 라이브러리는 고품질이므로 초점을 맞출 수있는 유일한 것은 프로젝트 요구를 충족시키기 위해 스타일을 적용하는 것입니다.

ESL은 Web API 및 ECMAScript 6 기능을 기반으로하며 Web UI 구성 요소 라이브러리는 Firefox, Chrome, Safari, Opera 및 Edge와 같은 모든 최신 브라우저에서 잘 작동 할 수 있습니다. ESL은 전체 폴리 플릴 목록이 제공 될 때 IE11에서 작동 할 수 있습니다 (자세한 내용은 브라우저 지원 및 폴리 플릴 참조).

라이브러리 구조

UI 구성 요소 라이브러리를 구축하는 동안 복잡한 프로젝트 아키텍처 문제를 해결하고 건식 원리를 준수하는 구성 요소, 구성 요소 및 유틸리티가 포함되었습니다. 웹 구성 요소의 런 다운을보고 사양을 읽으십시오.

도서관 코어

UI 구성 요소 라이브러리를 사용하면 기본 구성 요소 위에 구축하고 수명주기를 제어하기위한 유연한 구문 설탕을 얻을 수 있습니다.

• ESL 기본 요소

• ESL Mixin 요소

• ESL 미디어 쿼리

• ESL 트래버스 쿼리

• ESL 이벤트 리스너

• ESL UTILS

구성 요소

당사의 HTML UI 구성 요소 라이브러리는 우수한 성능으로 UX 모듈을 구성하는 데 필요한 모든 요소를 제공합니다.

• esl a11ygroup (베타)

• ESL 경보

• ESL 애니메이션

• ESL 각주 (베타)

• ESL 이미지

• ESL 미디어

• ESL 패널

• ESL 패널 그룹

• ESL 팝업 (베타)

• ESL 관련 대상 (베타)

• ESL 스크롤 바

• ESL 선택 (베타)

• ESL 선택 목록 (베타)

• ESL 공유 (베타)

• ESL 탭 및 탭

• ESL 토글

• ESL 트리거

---

설치 안내서

0. 전제 조건 :

   • 브라우저 지원 목록에서 브라우저를 지원하는 데 필요한 폴리 플릴이 모두 있는지 확인하십시오. 자세한 내용은 브라우저 지원 및 폴리 플릴을 참조하십시오.
   • 번들을 사용하여 프로젝트를 구축하십시오. 현재 ES6 모듈 만 소비 할 수 있습니다.

1. ESL NPM 종속성 설치 :

    npm i @exadel/esl --save
   

2. 필요한 구성 요소/모듈 가져 오기 :

    import '@exadel/esl/modules/esl-component/core' ;

   • core 모듈 항목은 일반적으로 모듈의 주요 부분을 나타냅니다.
   • 선택적 하위 기능을 직접 포함시킵니다. 자세한 내용은 구성 요소의 문서를 참조하십시오.

    import '@exadel/esl/modules/esl-media/providers/iframe-provider' ;

   • 일부 모듈에는 누적 all 항목이 포함되어 있습니다.
   • 스타일은 두 가지 버전으로 배포됩니다.
     • '사용 준비' core.css 또는 core.less
     • Mixin 버전 core.mixin.less 사용자 정의 태그 이름 정의

3. [선택 사항] 환경 구성 설정, 예를 들어 사용자 정의 화면 중단 점 :

    import { ESLScreenBreakpoints } from '@exadel/esl/modules/esl-media-query/core' ;
   
   // define XS screen breakpoint for up to 800px screen width
   ESLScreenBreakpoints . addCustomBreakpoint ( 'XS' , 1 , 800 ) ; 

4. register 정적 메소드 호출을 통해 웹 구성 요소를 등록하십시오.

    ESLImage . register ( ) ;

   사용자 정의 태그 이름을 '등록'함수로 전달할 수 있지만 예외적 인 상황에서만이 옵션을 사용하십시오.

---

기고자를위한 개발 정보

ESL 팀의 일원이거나 프로젝트에 기여하려면 프로젝트 프로세스 및 계약에 대한 유용한 정보를 다음과 같이 찾을 수 있습니다.

• ? 기여 가이드

• ? 개발 가이드

• ? 기고자 라이센스 계약

---

ESL 코어 팀

건축가, 유지 및 ESL의 아이디어를 유지하는 사람들

Alexey Stsefanovich

줄리아 무라슈코

율리 야 아담스 카야

DMYTRO SHOVCHKO

안나 바미나

Anastasiya Lesun

ESL 기고자 :

ESL에 적극적으로 기여하는 사람들

Anna-Mariia Petryk 개발자	Feoktyst Shovchko 개발자	Natallia Harshunova 개발자	야나 베르 나츠 스카야 개발자	나탈리 스 미르 노바 개발자
Iryna Pavlenko 디자이너	Aliaksandr Auseyeu 컨설턴트	Andrey Belous 컨설턴트	Dzianis Mantsevich 컨설턴트	Liubou Masiuk 컨설턴트

Exadel, Inc.