ebayui core
v14.6.0
Marko 위젯 컬렉션; 모든 eBay 구성 요소, 페이지 및 앱의 핵심 빌딩 블록으로 간주됩니다.
참고 : eBayui 코어 구성 요소는 Marko 플래그를 사용하므로 <lasso-page/> 핵심 구성 요소가있는 모든 페이지에 추가되어야합니다.
참고 : @ebay/skin/global 및 @ebay/skin/marketsans 모든 모듈이 올바르게로드하려면 앱에서로드해야합니다.
참고 : 스프레드 속성이 제대로 작동하려면 [email protected] 최소한 필요합니다.
모든 구성 요소는 공식 eBay 브라우저 정책에 따라 Browserstack을 사용하여 크로스 브라우저를 개발하고 테스트합니다.
우리는 접근성을 매우 진지하게 받아들입니다. 정말 진지하게. 따라서 모든 구성 요소는 eBay 마인드 패턴에 따라 구축됩니다. 이러한 패턴은 Wai-Aria Authoring Practices에서 제공 한 사양에서 기반을 둡니다.
구성 요소는 다음 자원을 활용하여 층화되고 점진적으로 향상된 방식으로 내장되어 있습니다.
각 층은 접근성을 시행하고 향상시키기 위해 비트를 사용합니다. 우리는이 수준의 지원이 우리의 주요 판매 포인트 중 하나라고 생각하며, 당신도 그렇게하기를 바랍니다!
ebay-3d-viewerebay-alert-dialogebay-avatarebay-badgeebay-breadcrumbsebay-buttonebay-calendarebay-carouselebay-character-countebay-checkboxebay-chipebay-comboboxebay-cta-buttonebay-date-textboxebay-detailsebay-drawer-dialogebay-eekebay-fake-linkebay-fake-menuebay-fake-menu-buttonebay-fake-tabsebay-filterebay-filter-menuebay-filter-menu-buttonebay-fullscreen-dialogebay-iconebay-icon-buttonebay-infotipebay-inline-noticeebay-lightbox-dialogebay-listebay-listbox-buttonebay-menuebay-menu-buttonebay-page-noticeebay-paginationebay-panel-dialogebay-phone-inputebay-progress-barebay-progress-bar-expressiveebay-progress-spinnerebay-progress-stepperebay-radioebay-section-noticeebay-section-titleebay-segmented-buttonsebay-selectebay-signalebay-skeletonebay-snackbar-dialogebay-split-buttonebay-star-ratingebay-star-rating-selectebay-switchebay-tabsebay-textboxebay-toast-dialogebay-toggle-buttonebay-toggle-button-groupebay-tooltipebay-tourtipebay-tri-state-checkboxebay-video eBayui 코어 구성 요소는 NPM의 @ebay/ebayui-core 패키지로 제공됩니다.
NPM 또는 원사를 사용하여 프로젝트에 패키지 종속성을 추가하십시오.
npm add @ebay/ebayui-core자세한 내용은 업그레이드 안내서를 참조하십시오
패키지 의존성이 추가되면 이제 Ebay Customs 태그를 Marko 템플릿에서 사용할 수 있습니다. 예를 들어, ebay-menu 구성 요소를 사용하려면 다음과 같습니다.
< ebay-menu text = " Sort " type = " radio " >
< @item > Price </ @item >
< @item > Time </ @item >
< @item > Distance </ @item >
</ ebay-menu > 속성은 구성 요소의 초기 상태를 제공합니다. 메뉴에는 text 및 type 속성이 있음을 알 수 있습니다.
< ebay-menu text = " Sort " type = " radio " >
< @item > Price </ @item >
< @item > Time </ @item >
< @item > Distance </ @item >
</ ebay-menu >eBayui 구성 요소에 새로운 속성을 전달하면 항상 내부 상태로 재설정됩니다. 이 상태를 직접 유지하려면 상태를 자신의 구성 요소로 동기화 할 수있는 이벤트가 노출됩니다.
class {
onCreate () {
this . state = {
dialogIsOpen : false
}
}
handleDialogClose () {
this . state . dialogIsOpen = false ;
}
handleDialogOpen () {
this . state . dialogIsOpen = true ;
}
}
< ebay-lightbox-dialog
open = state . dialogIsOpen
on-open ( ' handleDialogOpen ' )
on-close ( ' handleDialogClose ' ) >
...
</ ebay-lightbox-dialog >HTML 속성은 모든 구성 요소에서 사용할 수 있으며 구성 요소의 가장 두드러진 태그로 전달됩니다. 가장 두드러진 태그는 일반적으로 루트 또는 형태 제어이지만 개별 구성 요소는 특정 사례에 따라 다르면 주목할 것입니다.
정적 사용의 예 :
< ebay-button id = " my-button " /> Pass-Strough 속성을 동적으로 사용하려면 html-attributes 속성을 통해 전송되어야합니다.
$ const myAttributes = { id : ' my-button ' };
< ebay-button html-attributes = myAttributes />정적 및 동적 인 패스 스루 속성은 동시에 사용할 수 있습니다 (HTML-Attributes는 충돌에서 우선합니다) :
$ const myAttributes = { id : ' my-button ' };
< ebay-button html-attributes = myAttributes type = " submit " />Marko 구문을 사용하여 이벤트를 처리 할 수도 있습니다.
< ebay-menu text = " Sort " type = " radio " on-change ( " onMenuChange " ) >
< @item > Price </ @item >
< @item > Time </ @item >
< @item > Distance </ @item >
</ ebay-menu >다가오는 로드맵 및 릴리스 기록은 릴리스 및 이정표 페이지를 참조하십시오.
eBayui-core 패키지는 엄격한 의미 론적 버전을 따릅니다.
버전 번호 전공 .minor.patch :
감가 상각은 릴리스 노트를 통해 전달되므로 신중하게 읽으십시오. 일반적으로 다음 주요 버전에서는 더 이상 사용되지 않은 기능이 제거 될 것으로 예상됩니다. 그러나 어떤 경우에는 더 오래 기다릴 수 있습니다.
문제 페이지를 사용하여 질문을하거나 문제를보고하거나 기능 요청을 제출하십시오.
귀하의 문제를 추적하기 위해, 우리의 관리자는 하나 이상의 컬러 레이블로 할당합니다.
eBay UI에 기여하고 싶습니까? 자세한 내용은 기고 페이지를 방문하십시오.
저작권 (C) 2018 eBay Inc.
이 소스 코드의 사용은 라이센스 파일 또는 https://opensource.org/licenses/mit에서 찾을 수있는 MIT 스타일 라이센스로 관리됩니다.
일부 구성 요소를 사용하려면 제 3 자의 별도의 비 개시 소스 라이센스가 필요합니다.
데이터 시각화 구성 요소 및 eBayui 라이브러리의 차트 구성 요소는 하나 이상의 HighCharts® 소프트웨어 제품을 사용하도록 설계되었습니다. HighCharts®는 HighSoft AS의 등록 상표입니다. eBay와 제휴하지 않은 Highsoft. eBay는 데이터 시각화 구성 요소 및 차트 구성 요소가 사용하도록 설계된 HighCharts® 소프트웨어 제품과 관련하여 명시 적이든 묵시적이든, 명시 적이든 묵시적이든, 상인, 상인성, 특정 목적에 대한 적합성 및 비회원)에 대한 어떠한 보증도 제공하지 않습니다.
HighCharts® 소프트웨어 제품의 상업적 사용에는 HighSoft AS가 제공하는 유료 라이센스가 필요합니다. eBayui 라이브러리의 많은 구성 요소는 MIT 라이센스에 따라 라이센스가 부여되지만 Ebayui 라이브러리의 데이터 시각화 구성 요소 및 차트 구성 요소는 MIT 라이센스 또는 기타 오픈 소스 라이센스에 따라 라이센스가 부여되지 않습니다. HighCharts® 소프트웨어 제품 (예 : 사용, 설치, 배포, 게시, 병합, 복제 및 수정 권한을 포함하되 이에 국한되지 않은 권리는 HTTP://www.highcharts.com에서 온라인으로 이용할 수있는 하나 이상의 독점 라이센스 계약의 조건에 의해 적용되거나 고유 한 라이센스 계약에 의해 고유 한 라이센스 계약에 의해 고객과의 협상을 할 수 있습니다. HighSoft As As As As As는 비상업적 사용을 위해 HighCharts® 소프트웨어 제품을 무료로 사용하도록 선택할 수 있지만 HighCharts® 소프트웨어 제품을 사용하여 HighSoft AS와의 라이센스의 조건을 확인하려는 당사자의 책임입니다. 이 라이센스의 조항에도 불구하고 HighCharts® 소프트웨어 제품을 사용할 수있는 HighSoft AS (또는 그 후임자 또는 할당)가 라이센스를받지 않은 당사자는 데이터 시각화 구성 요소와 eBayui 라이브러리의 차트 구성 요소를 사용할 수있는 라이센스가 없습니다.
이 통지는 소프트웨어의 모든 사본 또는 실질적인 부분에 포함되어야한다.
