Панель выбора цвета
Контрол позволяет выбрать цвет из панели с набором предустановленных цветов, которая открывается кликом по кнопке.
Документация API | Спецификация
Набор элементов
Для отображения панели выбора цвета на странице передайте в опцию items набор элементов, по которым она будет построена.
Цвета для набора могут быть взяты из палитры основных цветов, а также из дополнительных.
<ExtControls.colorPicker:Panel
items="{{_items}}" />
Отображение текста внутри элемента настраивается с помощью свойства innerText опции items.
Стиль текста задается в свойстве innerTextStyle.
protected _items: RecordSet = new RecordSet({
keyProperty: 'id',
rawData: [
{
id: '--primary_contrast_background-color',
innerText: 'A',
innerTextStyle: 'light'
},
{
id: '--secondary_contrast_background-color',
innerText: 'A',
innerTextStyle: 'light'
},
]
});
Выбранный элемент
В опции selectedKey можно задать выбранный по умолчанию элемент. Связывание опции контрола и свойства логического родителя выполняют через директиву bind.
<ExtControls.colorPicker:Panel
items="{{_items}}"
bind:selectedKey="_selectedKey"/>
Размер элемента
Размер элемента, отображемого на панели выбора цвета, задается в опции itemSize.
<ExtControls.colorPicker:Panel
items="{{_items}}"
bind:selectedKey="_selectedKey"
itemSize="l" />
Отображение элементов в несколько колонок
Элементы в панели выбора цветов можно расположить в несколько колонок. Их количество задается в опции columnsCount.
<ExtControls.colorPicker:Panel
items="{{_items}}"
bind:selectedKey="_selectedKey"
columnsCount="{{3}}" />
Кнопка открытия панели
Панель выбора цвета открывается кликом по кнопке, которая реализована классом ExtControls/colorPicker:Button.
<ExtControls.colorPicker:Button
bind:selectedKey="_selectedKey"
items="{{_items}}" />