2

我目前正在尝试将 @ebay/skin 包用于我的 marko 项目中的 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>

但是我似乎无法让轮播元素在我的网页上正确显示，因为看起来 在此处输入图像描述 我应该已经成功安装了所有东西，也许我在某处缺少额外的参考？任何帮助将不胜感激谢谢！

4

1 回答 1

1

我认为问题在于您@ebay/ebayui-core/carousel的 browser.json 中缺少您。ebayUI 组件目前在 Marko 3 中实现（可以被 Marko 4 使用），但仍然有这个限制。此外，您不需要@ebay/skin在 browser.json 中包含它，因为 ebayUI 会为您引入它。

此外，JSYK ebayUI 目前正计划在接下来的几周内发布一个将所有组件重构为纯 Marko 4 的版本，这将消除此限制。（将作为 v5 发布）。

我注意到的另一个问题是您已经marko-widgets@6安装了。您实际上需要使用marko-widgets@7v3 小部件兼容层的一部分来在 Marko 4 中使用 v3 小部件。再次，一旦 ebayUI 更新到 Marko 4，您甚至不需要安装marko-widgets.

于 2019-12-04T13:46:08.650 回答