Intermediate
Иконки и виджеты
Иконки можно вкладывать в любой компонент или его элементы. Вы можете добавить иконку в форме кнопки на Toolbar, украсить вкладки Tabbar и Accordion или элементы List и DataView
Варианты добавления иконки:
- как отдельный компонент;
- как тип кнопки;
- как CSS класс.
Иконки по умолчанию
По ссылке ниже вы найдёте список иконок по умолчанию:
Related sample: Icons Cheatsheet
Webix предоставляет два набора иконок по умолчанию в зависимости от используемой темы:
1. Иконки Webix Awesome для Flat, Compact и Contrast тем - на базе коллекции Font Awesome 5.
2. Иконки Webix Material для Material, Mini, Willow и Dark тем - на базе коллекции Material Design.
Использовать иконки по умолчанию можно следующими способами:
- через конфиг компонента: icon:"wxi-name"
// используем иконку по умолчанию
{
view:"icon",
icon:"wxi-pencil" }
- с помощью HTML: span class="webix_icon wxi-name"
<span class='webix_icon wxi-pencil'></span>Произвольные иконки
Вы также можете использовать набор произвольных иконок в вашем Webix приложении. Для этого вам необходимо:
1. подключить желаемый набор на страницу;
2. указать полное имя иконки, которую вы хотите использовать:
// используем иконку Font Awesome
{ view:"icon", icon:"fas fa-envelope"}
// используем иконку Material Design
{ view:"icon", icon:"mdi mdi-email"}
Например, вы можете использовать:
Коллекцию иконок Material Design
Коллекцию иконок Font Awesome 5
Иконка-компонент
Такая иконка выглядит как кнопка с рамкой. Обратите внимание, что для такого типа иконки текстовый ярлык не подразумевается.
// используем иконку по умолчанию
{ view:"icon", icon:"wxi-pencil"}
// используем иконку Font Awesome
{ view:"icon", icon:"fas fa-pencil"}
// используем иконку Material Design
{ view:"icon", icon:"mdi mdi-pencil"}
Значение свойства icon - это название желаемой иконки.
Кнопка с иконкой
type:"icon" |
 |
type:"iconTop" |
 |
// используем иконку по умолчанию
{ view:"button", type:"icon", icon:"wxi-pencil", label:"Edit" }
// используем иконку Font Awesome
{ view:"button", type:"icon", icon:"fas fa-pencil", label:"Edit"}
// используем иконку Material Design
{ view:"button", type:"icon", icon:"mdi mdi-pencil", label:"Edit"}
- type - свойство, которое превращает стандартную кнопку в кнопку-иконку:
- icon - иконка без определённой рамки;
- iconTop - большая иконка без рамки с текстовым ярлыком снизу;
- iconButton - маленькая иконка с текстовым ярлыком справа;
- iconButtonTop - большая иконка с текстовым ярлыком снизу;
- icon - название иконки (если вы пользуетесь сторонним набором иконок, ищите название иконки на соответствующем сайте);
- label - текстовый ярлык для кнопки;
- width - ширина кнопки с ярлыком и иконкой;
- badge - оранжевый кружок, сигнализирующий о новых сообщениях.
CSS класс 'webix_icon'
Такой вариант инициализации иконок подходит для виджетов и элементов, у которых вместо кнопок другие контролы: вкладки (кнопки сами по себе), панели, элементы списка и dataview, ячейки datatable. В этом случае кнопки выполняют декорирующую роль.
Возможные CSS классы:
- 'webix_icon wxi-name' - стандартная иконка (белая или чёрная в зависимости от текущей темы);
- 'webix_input_icon wxi-name' - светло-серая иконка для использования с полями ввода.
Для произвольных иконок используйте 'webix_icon full icon name' и 'webix_input_icon full icon name' соответственно.
Оба класса включают названия иконки, которую можно посмотреть в списке иконок по умолчанию или в документации используемых иконок (в случае сторонней библиотеки).
С помощью CSS свойства
В кладки Multiview
{ view:"tabbar", options:[
// иконка по умолчанию
{ value:"pencil", label:"Edit", css:"webix_icon wxi-pencil"}
// иконка Material Design
{ value:"mail", label:"Mail", css:"webix_icon mdi mdi-email"},
// иконка Font Awesome
{ value:"users", label:"User", css:"webix_icon fas fa-user"}
]}
С помощью HTML
Вы также можете добавить HTML элемент с классом 'icon' текстовому значению любого элемента виджета:
Панель AccordionItem с иконкой
{ header:"<span class='webix_icon wxi-pencil'></span>Edit"}
Элемент списка с иконкой
{ template:"<span class='webix_icon wxi-#icon#'></span> #name#"}
Здесь имя иконки находится между хэш символами, т.к. приходит с данными. Например, с JSON это выглядит следующим образом:
var data=[
{id:1, name:"item1", icon:"wxi-pencil"},
{id:2, name:"item2", icon:"wxi-trash"}
]
Как менять иконки по умолчанию
Иконки по умолчанию, которые используются для различных контролов можно менять на произвольные несколькими путями.
Как указать иконку Material Design
Если вы хотите указать отличную от исходной иконку, передайте её имя в качестве значения свойству icon:
{view:"richselect", label: "Other", options:options, icon:"mdi mdi-arrow-down"}
В результате иконки RichSelect по умолчанию ("wxi-menu-down") будет заменена на иконку "mdi mdi-arrow-down" из коллекции Material Design.
Как указать произвольную иконку
Чтобы указать произвольную иконку в виде фонового изображения, опишите новое CSS правило, которое переопределит правило по умолчанию. Объект конфигурации виджета остаётся без изменений:
{view:"combo", label: "Fruit", options:[...] }
И RichSelect, и Combo использует иконку "wxi-menu-down" icon, CSS стили которой нужно изменить:
.webix_input_icon.wxi-menu-down:before{
content:""; // удаляем иконку по умолчанию
background-image: url("search.png");
width:20px;
height:20px;
display:block;
}
В результате иконка "wxi-angle-down" будет заменена на "search.png".
Related sample: Styling Combo Icons
Если вам необходимо стилизовать один комбобокс, а другой оставить без изменений, опишите отдельный css класс для той, которую хотите изменить:
{view:"combo", label: "Fruit", options:[...], css:"custom" }
Соответствующий CSS выглядит таким образом:
.custom .webix_input_icon.wxi-menu-down:before{
/* новые стили для иконки */
}
Стилизация виджетов подробно описана в соответствующей статье.
Наверх