javascript - 如何在 dxSlideOut、Devextreme 中设置图标

Question

我在 Devextreme 基础项目的某些部分使用了 dxslideout

.dxView

<div data-bind="dxSlideOut: {
dataSource: musteriNavItems
}"> 
.
. 
</div>

javascript

musteriNavItems = [
{ action: "Profil", icon: "profil", text: "Profil" },
{ icon: "info", text: "Çıkış" }
];

这些代码有效。文本出现在 dxSlideOut 设计中，但图标不会出现在此设计中。如何在文本旁边添加图标？

Answer 1

默认的 dxSlideOut 项目模板不支持“图标”字段。因此，您可以使用menuTemplate选项来定义菜单项的图标。

<div data-options="dxTemplate:{ name:'menuItem' }">
     <span data-bind="attr: {'class': 'dx-icon-' + icon}"></span>
     <span data-bind="text: text"></span>
</div>

我在这里创建了一个小小提琴 - http://jsfiddle.net/dfc2ggck/1/

此外，请确保您的图标存在于DevExtreme Icon Library中。