sidebar user icon

Webix JS
1

Здравствуйте, подскажите, как я могу подставить пользовательские иконки в сайдбар, не используя font avesome

2

Сделал так

icon:function(obj, common){
		if(obj.icon){
            return "div style='margin-left: 10px;' class='webix_tree_file webix_tree_+obj.icon+></div;
        }
           return "";
	}

Работает, конечно, но может есть менее радикальный способ?

3

Здравствуйте! Способ есть, он подробно описан вот здесь:

http://docs.webix.com/desktop__icon_types.html#changingdefaulticons

4

Вы можете переопределить “sideBar” type:

webix.type(webix.ui.sidebar, {
    baseType:"sideBar",
    name: "imageSideBar",
    icon: "<img src='#image#' class='sidebar-icon'>"
});

webix.ui({
    view: "sidebar",
    type: "imageSideBar",
    ...					
});
5

Спасибо!

6

Hello! I never got to swap the icons, please tell me how can I do it?
https://webix.com/snippet/06539c87

7

@Evgeniy, hello!
There is information about icons

If you’d like to use another icon from the FontAwesome collection instead of the default one, specify its name as a value of the icon property:

{view:"richselect", label: "Other", options:options, icon:"caret-down"}

But, if you want to click on a row with an icon and change it on another one, so it’s better to use ui.toggle

By default, in the sidebar, the icon is rendered according to the property icon from the data. So we have such template which defines the appearance of the Sidebar in the collapsed and expanded states

template: function(obj, common){
if(common.collapsed)
    return common.icon(obj, common);
return common.arrow(obj, common)+common.icon(obj, common)+"<span>"+obj.value+"</span>";
}
8

Thank you very much for the answer! I can’t change the icon for a sidebar item. Could you show an example how to do it?

9

Hi @Evgeniy,

Can you please clarify, by “can’t change”, do you mean

  • change the icon on the go (sample);
  • init sidebar with custom icons which are different from the standard FontAwesome;
  • apply some CSS to the icons (or icon)?
10

Hi @Listopad !
I can’t init sidebar with custom icons which are different from the standard FontAwesome :smile:

11

Sidebar has different templates for rendering icons, values and arrow in options.

You need to modify the default template for icons by setting a custom type based on the original one:
https://webix.com/snippet/b566d9f8

12

Wow!!! I don’t even know how to thank You!!! Thank you very much!