Как сделать выпадающий список интересным: практические примеры кастомизации под любой макет

Рассказываем и показываем
1

В каждом виджете аналитической панели есть опции по изменению его стиля или по расширению его возможности средствами опции CSS или блока Выполнить код (JS) который вызывается при инициализации аналитической панели.

В данной статье описан пример изменения стиля для виджета Выпадающий список как с единичным, так и с множественным выбором элементов.

Стиль виджета по умолчанию

image
image322×454 4.64 KB

Целевой результат

image
image371×355 22.9 KB

Настройка

При настройки визуальных стилей для виджета Выпадающий список нужно учесть, что по умолчанию все настройки области выбора элемента данного виджета применяются ко всем выпадающим спискам приложения. Использование конструкции {{id}} для обращения к нужному классу в css работает для области настройки заголовка и области отображения выбранного значения.

Шаг 1. Присвоение класса для виджета

На первом этапе создадим отдельные классы для данного виджета. Данная опция позволит применять настройки стилей данного виджета только в рамках самого виджета (не применять настройки ко всем выпадающим спискам приложения).

В редакторе Blockly события При инициализации виджета выполним код:

const comboPicker = $widget.down('#combo').getPicker(); 
comboPicker.addCls('my-select-box-cls'); 
const multiComboPicker = $widget.down('#multicombo').getPicker(); 
multiComboPicker.addCls('my-select-box-cls');

image
image1025×362 28.9 KB

После применения настроек обращение к данному классу в разделе CSS происходит через конструкцию кода .my-select-box-cls. Данное наименование класса не является служебным, доступно пользовательское наименование.

:information_source: Данный класс можно использовать повторно и в других виджетах выпадающего списка при указании класса в событии инициализации

Шаг 2. Добавление стилей

Область списка элементов

Для область списка элементов зададим скругление углов 10px, выделим границы выпадающего списка и укажем ширину отступов для дочерних элементов 5px.

.my-select-box-cls.x-boundlist {
    border-radius: 10px;
    border: 1px solid #9fb4f3;
    padding: 5px;
}

:information_source: Классы одного элемента разделяются без пробела

image
image322×465 4.94 KB

В списке элементов сместим наименование элементов на 15px левее, увеличим высоту строки элемента до 35px, зададим радиус 10px и цвет текста.

.my-select-box-cls .x-boundlist-item {
    padding: 0 15px;
    font: normal 13px Ubuntu, tahoma, arial, sans-serif;
    line-height: 35px;
    border-radius: 10px;
    color: #323232;
}

:information_source: Классы разных элементов разделяются с пробелом: .x-boundlist-item дочерний

image
image322×471 4.69 KB

Зададим цвет фона при наведении на элемент из списка. Остальные настройки оставим аналогичны предыдущему классу

.my-select-box-cls .x-boundlist-item-over {
	padding: 0px 15px;
	font: mormal 13px Ubuntu, tahoma, arial, sans-serif;
	line-height: 35px;
	border: 1px solid transparent;
	border-radius: 10px;
	color: #005bff;
	background: #e4ebfe;
}

image
image322×471 4.81 KB

Зададим выделение текста выбранного элемента из списка. Остальные настройки оставим аналогичны предыдущему классу

.my-select-box-cls .x-boundlist-selected {
    padding: 0px 15px;
    font: bold 13px Ubuntu, tahoma, arial, sans-serif;
    line-height: 35px;
    border-radius: 10px;
    color: #005bff;
    background: #e4ebfe;
}

image
image322×471 6.29 KB

Так как была увеличена высота строки элементов списка (line-height: 35px), произошло смещение последнего элемента списка. Для правильного отображения добавим отступ по нижней границе 10px

.my-select-box-cls .x-boundlist-list-ct {
    padding-bottom: 10px;
}

image
image332×431 4.7 KB

Удалим тень по контуру из области списка элементов. Для этого добавим запись в JS код при инициализации виджета

comboPicker.shadow = false;
multiComboPicker.shadow = false;

image
image316×426 4.21 KB

Увеличим отступ между объектами списка и областью выбранного значения. Добавим запись в JS код при инициализации виджета

$widget.down('#combo').pickerOffset = [0, 10];
$widget.down('#multicombo').pickerOffset = [0, 10];

image
image316×436 4.22 KB

Заголовок виджета

Изменим заголовок виджета: шрифты, расположение текста и фон области заголовка

/*Текст заголовка*/
{{id}} .x-panel-header-title-default {
    font: bolt 13px Ubuntu, tahoma, arial, sans-serif;
}
 
/*Расположение текст заголовка*/
{{id}} .x-panel-header-default-horizontal {
    padding: 15px 5px 5px 5px;
}
 
/*Фон заголовка*/
{{id}} .x-panel-header-default {
    background-color: transparent;
    border: 0px solid #f0f3fa;
}

image
image316×436 4.09 KB

Область выбранного значения

Внесем правки в область выбранного значения виджета: цвет границы, высота окна, шрифт и иконка выпадающего списка

/*Область выбранного значения*/
{{id}} .x-form-trigger-wrap-default {
    border-radius: 10px;
    border: 2px solid #005dff;
}
 
/*Область выбранного значения*/
{{id}} .x-form-text-default {
    border-radius: 10px;
    min-height: 35px;
    font: normal 13px Ubuntu, tahoma, arial, sans-serif;
    color: #323232;
}
 
/*Иконка раскрытия списка*/
{{id}} .x-form-trigger-default {
    width: 30px;
    font: 25px / 35px alpha;
    background: transparent;
    color: #005dff
}

image
image316×447 4.33 KB

Итоги для одного виджета

Код при инициализации виджета

const comboPicker = $widget.down('#combo').getPicker();
comboPicker.addCls('my-select-box-cls');
const multiComboPicker = $widget.down('#multicombo').getPicker();
multiComboPicker.addCls('my-select-box-cls');
 
comboPicker.shadow = false;
multiComboPicker.shadow = false;
 
$widget.down('#combo').pickerOffset = [0, 10];
$widget.down('#multicombo').pickerOffset = [0, 10];

Код для стилей

/*Область списка элементов*/
.my-select-box-cls.x-boundlist {
    border-radius: 10px;
    border: 1px solid #9fb4f3;
    padding: 5px;
}
 
/*Список элементов*/
.my-select-box-cls .x-boundlist-item {
    padding: 0 15px;
    font: normal 13px Ubuntu, tahoma, arial, sans-serif;
    line-height: 35px;
    border-radius: 10px;
    color: #323232;
}
 
/*Элемент из списка при наведении*/
.my-select-box-cls .x-boundlist-item-over {
    padding: 0px 15px;
    font: mormal 13px Ubuntu, tahoma, arial, sans-serif;
    line-height: 35px;
    border-radius: 10px;
    color: #005bff;
    background: #e4ebfe;
}
 
/*Выбранный элемент из списка*/
.my-select-box-cls .x-boundlist-selected {
    padding: 0px 15px;
    font: bold 13px Ubuntu, tahoma, arial, sans-serif;
    line-height: 35px;
    border-radius: 10px;
    color: #005bff;
    background: #e4ebfe;
}
 
/*Текст заголовка*/
{{id}} .x-panel-header-title-default {
    font: bolt 13px Ubuntu, tahoma, arial, sans-serif;
}
 
/*Расположение текст заголовка*/
{{id}} .x-panel-header-default-horizontal {
    padding: 15px 5px 5px 5px;
}
 
/*Фон заголовка*/
{{id}} .x-panel-header-default {
    background-color: transparent;
    border: 0px solid #f0f3fa;
}
 
/*Область выбранного значения*/
{{id}} .x-form-trigger-wrap-default {
    border-radius: 10px;
    border: 2px solid #005dff;
}
 
/*Область выбранного значения*/
{{id}} .x-form-text-default {
    border-radius: 10px;
    min-height: 35px;
    font: normal 13px Ubuntu, tahoma, arial, sans-serif;
    color: #323232;
}
 
/*Иконка раскрытия списка*/
{{id}} .x-form-trigger-default {
    width: 30px;
    font: 25px / 35px alpha;
    background: transparent;
    color: #005dff
}

Результат

image
image316×447 4.33 KB

Итоги для всех виджетов в контейнере

Внесем правки в JS код и сделаем возможным применять стили для всех виджетов Выпадающий список расположенные в одном контейнере. Также добавим возможность обращаться к общим классам с конструкцией {{id}} чтобы стили применялись только в виджетам Выпадающий список.
По умолчанию, при текущих настройках получаем следующий результат:

image
image1919×800 38.4 KB

Код при инициализации виджета

$widget.query('widget_select_box').forEach(selectBox => {
  selectBox.addCls('my-select-box-widget-cls');
  selectBox.query('#combo, #multicombo').forEach(combo => {
    const picker = combo.getPicker();
    picker.addCls('my-select-box-list-cls');
    picker.shadow = false;
    combo.pickerOffset = [0, 10];
  })
});

где:

  • my-select-box-widget-cls - класс для виджета (заголовок и область выбранного значения)
  • my-select-box-list-cls - класс для области списка элементов

:information_source: Данное наименование класса не является служебным, доступно пользовательское наименование.

Код для стилей

/*Область списка элементов*/
.my-select-box-list-cls.x-boundlist {
  	border-radius: 10px;
    border: 1px solid #9fb4f3;
    padding: 5px;
}

/*Список элементов*/
.my-select-box-list-cls .x-boundlist-item {
    padding: 0 15px;
    font: normal 13px Ubuntu, tahoma, arial, sans-serif;
    line-height: 35px;
    border-radius: 10px;
    color: #323232;
}

/*Элемент из списка при наведении*/
.my-select-box-list-cls .x-boundlist-item-over {	
    padding: 0px 15px;
    font: mormal 13px Ubuntu, tahoma, arial, sans-serif;
    line-height: 35px;
    border-radius: 10px;
    color: #005bff;
    background: #e4ebfe;
}

.my-select-box-list-cls .x-boundlist-list-ct {
    padding-bottom: 10px;
}

/*Выбранный элемент из списка*/
.my-select-box-list-cls .x-boundlist-selected {
    padding: 0px 15px;
    font: bold 13px Ubuntu, tahoma, arial, sans-serif;
    line-height: 35px;
    border-radius: 10px;
    color: #005bff;
    background: #e4ebfe;
}

/*Текст заголовка*/
{{id}} .my-select-box-widget-cls .x-panel-header-title-default {
  	font: bolt 13px Ubuntu, tahoma, arial, sans-serif;
}

/*Расположение текст заголовка*/
{{id}} .my-select-box-widget-cls .x-panel-header-default-horizontal {
    padding: 15px 5px 5px 5px;
}

/*Фон заголовка*/
{{id}} .my-select-box-widget-cls .x-panel-header-default {
    background-color: transparent;
    border: 0px solid #f0f3fa;
}

/*Область выбранного значения*/
{{id}} .my-select-box-widget-cls .x-form-trigger-wrap-default {
    border-radius: 10px;
    border: 2px solid #005dff;
}

/*Область выбранного значения*/
{{id}} .my-select-box-widget-cls .x-form-text-default {
    border-radius: 10px;
    min-height: 35px;
  	font: normal 13px Ubuntu, tahoma, arial, sans-serif;
    color: #323232;
}

/*Иконка раскрытия списка*/
{{id}} .my-select-box-widget-cls .x-form-trigger-default {
    width: 30px;
    font: 25px / 35px alpha;
    background: transparent;
  	color: #005dff
}

Обращение к общим класса с конструкцией {{id}} с учетом указания класса .my-select-box-widget-cls. Выбран этот класс, так как в данном коде все правки с конструкцией {{id}} относятся к заголовку или области выбранного значения.

Результат

Ко всем виджетам Выпадающий список в рамках одного контейнера применились стили указанные в JS и CSS коде родительского виджета Контейнер

image
image1919×801 41.1 KB

1 Like