
Marko小部件的集合;被認為是所有eBay組件,頁面和應用程序的核心構建塊。
注意:eBayui核心組件使用Marko標誌,因此需要將<lasso-page/>添加到具有核心組件的任何頁面中。
注意: @ebay/skin/global和@ebay/skin/marketsans必須由您的應用程序加載,以使所有模塊正確加載。
注意:為了使差異屬性正常工作, [email protected]至少需要
所有組件均根據我們的官方eBay瀏覽器策略,使用Browserstack開發和測試了跨瀏覽器。
我們非常重視可訪問性。確實非常認真。因此,所有組件均根據eBay的思維模式構建。這些模式反過來依賴於Wai-Aria創作實踐提供的規格。
組件以分層,逐漸增強的方式建造,利用以下資源:
每一層都可以實現和增強可訪問性。我們認為這種支持水平是我們的主要賣點之一,我們也希望您也能做到!
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核心組件可作為@ebay/ebayui-core包裝套件提供,在NPM上。
使用NPM或紗線將包裹依賴性添加到您的項目中:
npm add @ebay/ebayui-core有關更多信息,請參見升級指南
一旦添加了軟件包依賴關係,eBay海關標籤現在可用於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 " />為了動態地使用通行屬性,應通過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.
此源代碼的使用由MIT風格的許可約束,該許可可以在許可證文件或https://opensource.org/licenses/mit中找到。
某些組件的使用需要第三方單獨的,非開放的源許可證
eBayui庫的數據可視化組件和圖表組件旨在使用一種或多種HighCharts®軟件產品。 HighCharts®是Highsoft的註冊商標。 Highsoft與eBay沒有隸屬關係。 eBay不提供任何形式的保證(例如,適銷性,適合特定目的的適用性和非介紹),無論是明示的還是暗示的,就數據可視化組件和圖表組件設計的HighCharts®軟件產品而言。
HighCharts®軟件產品的商業用途需要Highsoft AS提供的付費許可。雖然eBayui庫的許多組件均經過麻省理工學院許可證,但HighCharts®軟件產品的數據可視化組件和eBayui庫的圖表組件旨在使用MIT許可證或任何其他開源許可證。與HighCharts®軟件產品有關的權利(例如,包括但不限於使用,安裝,分發,發布,發布,合併,重複和修改)受到一項或多項或多項專有許可協議的條款,這些條款可在線獲得http://www.highcharts.com或通過自定義許可的限定級別的cultitiation and Sultsoft的http://www.highcharts.com或通過其自定義許可。雖然HighSoft可能會選擇免費使用HighCharts®軟件產品許可以非商業用途許可,但任何希望使用HighCharts®軟件產品以Highsoft為AS的授權的條款是任何一方的責任。儘管有任何規定,但未獲得Highsoft AS(或其繼任者或任務)使用HighCharts®軟件產品的當事方未獲得許可使用數據可視化組件和eBayui庫的圖表組件。
該通知應包含在軟件的所有副本或大量部分中。