
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库的图表组件。
该通知应包含在软件的所有副本或大量部分中。