Панель выбора цвета

Контрол позволяет выбрать цвет из панели с набором предустановленных цветов, которая открывается кликом по кнопке.

Набор элементов

Для отображения панели выбора цвета на странице передайте в опцию 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}}" />