我目前正在尝试在我的marko项目中将@ ebay / skin包用于UI元素,但它们似乎没有用。
我的package.json文件看起来像这样
{
"name": "marko-starter-demo",
"description": "Demo of how to build an app using marko-starter",
"version": "2.0.0",
"dependencies": {
"@ebay/ebayui-core": "^4.3.1",
"@ebay/skin": "^9.3.0",
"axios": "^0.16.2",
"chromedriver": "^77.0.0",
"express": "^4.17.1",
"jquery": "^2",
"marko": "^4.13.10",
"marko-starter": "^2.0.4",
"marko-widgets": "^6.6.6"
},
我的browse.json看起来像这样
{
"dependencies": [
"require: jquery",
"@ebay/skin",
"@ebay/skin/carousel",
"@ebay/skin/icon",
"page.js",
"custom.less"
]
}
最后我的代码看起来像这样
<div class="carousel">
<div class="carousel__container">
<button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
<svg aria-hidden="true" class="icon icon--chevron-left-small" focusable="false" >
<use xlink:href="#icon-chevron-left"></use>
</svg>
</button>
<ul class="carousel__list">
<li>Card 1</li>
<li>Card 2</li>
<li>Card 3</li>
<li>Card 4</li>
<li>Card 5</li>
<li>Card 6</li>
<li>Card 7</li>
<li>Card 8</li>
</ul>
<button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
<svg aria-hidden="true" class="icon icon--chevron-right-small" focusable="false">
<use xlink:href="#icon-chevron-right-small"></use>
</svg>
</button>
</div>
</div>
但是我似乎无法使轮播元素正确显示在我的网页上,因为它看起来像这样
我应该已经成功安装了所有内容,也许我在某处缺少额外的参考?
任何帮助将不胜感激,谢谢!
最佳答案
我认为问题在于您在browser.json中缺少@ebay/ebayui-core/carousel
。 ebayUI组件当前在Marko 3中实现(Marko 4可以使用),但是仍然有此限制。另外,您不需要在browser.json中添加@ebay/skin
,因为ebayUI会为您带来它。
同样,JSYK ebayUI当前正计划在接下来的几周内发布所有重构为纯Marko 4的组件,这将消除此限制。 (将作为v5发布)。
我注意到的另一个问题是您已安装marko-widgets@6
。您实际上会想使用marko-widgets@7
,它是v3小部件兼容性层的一部分,可在Marko 4中使用v3小部件。同样,一旦ebayUI更新为Marko 4,您甚至不需要安装marko-widgets
。
关于html - eBay皮肤无法在HTML网页上运行,但已成功安装,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59173850/