ColorPicker

Отображает инструмент для выбора цвета с возможностью настройки альфа-канала

Используется в компоненте Form или непосредственно на экранной форме.

Позволяет выбирать цвет следующими способами:

цветовой спектр;
ползунки (Оттенок и Прозрачность);
палитра;
пипетка;
текстовый ввод. Имеет следующие режимы работы:
Picker: позволяет выбирать любой цвет из отображаемого спектра;
Pallete: предлагает выбор из существующей палитры дизайн-системы Платформы или переданного массива цветов Colors;
Full: обьединяет режимы Picker и Pallete. В режиме Pallete позволяет ограничить доступные для выбора цвета с помощью свойств HueMode (Light, Dark, Full) или Colors. Может иметь один из следующих предопределенных размеров:
Mini;
Small;
Medium;
Large.

При выборе цвета в форматах rgb и hsl значение конвертируется и отображается в формате hex/hexa.

  <ColorPicker Mode="Full" HueMode="Full" Size="Large" Model-var="color" onChange={() => {}} />

Свойства

Autofocus

Признак установки фокуса на компонент при загрузке страницы.

Тип: boolean

Badge

Количественная информация в компонентах Menu, Accordion, Link, Text.

В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)

Тип: any

CSS

Массив строк-классов CSS-стилей, описанных в файле CSS.css разрабатываемого проекта или встроенных CSS-стилей Платформы.

Пример:

// внешние (m) и внутренние (p) отступы для компонента. Число после символа "-" (в этом примере - 4) должно быть кратно величине, указанной в параметре, определяющем кратность отступов, в файле Style.mdtheme разрабатываемого проекта.
CSS={["m-4", "p-4"]}

Тип: array

Colors

Массив цветов, доступных для выбора, или словарь с ключами - названиями цветов и значениями - их значениями. Не более 100 значений, которые заполняются по порядку с лева направо, сверху вниз. Работает только в режиме Palette.

Тип: any

CombineConfig

Служебное свойство, используемое в визуальном режиме Редактора Форм, для присваивания значений свойствам компонента в виде генерируемых блоков кода. Запрещено изменять значение.

Тип: object

DataHint

Текст, отображаемый при наведении указателя мыши на значок в виде кружка с буквой i. Это свойство актуально только для дочерних компонентов компонента Form и имеет смысл только при одновременном использовании свойства Label компонента.

Тип: string

Disabled

Признак запрета на редактирование компонента.

Тип: boolean

Error

Текст ошибки при валидации компонента или undefined/false, если при валидации не обнаружены ошибки. Пример использования Error см. в статье Валидация данных перед отправкой на сервер.

Тип: boolean

ErrorMessage

Сообщение об ошибке при валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо ErrorMessage рекомендуется использовать свойство Error.

Тип: string

Focused

Признак установки фокуса на компонент в процессе работы приложения.

Тип: boolean

Hidden

Признак состояния компонента Скрыт.

Тип: boolean

HighlightError

Признак подсвечивания ошибки.

Тип: boolean

Значение по умолчанию: True

Hint

Подсказка над компонентом.

Тип: string

HintPosition

Позиция для отображения текста, определенного в свойстве DataHint.

Тип: enum

Значение по умолчанию: right

Возможные значения:

left - Слева right - Справа top - Сверху bottom - Снизу topRight - Сверху справа topLeft - Сверху слева bottomRight - Снизу справа bottomLeft - Снизу слева

HueMode

Режим оттенков: отображение цветов только светлых или темных оттенков в режиме Pallete.

Тип: enum

Значение по умолчанию: Full

Возможные значения:

Light - Отображает только светлые оттенки Dark - Отображает только темные оттенки Full - Отображает все оттенки

Id

Идентификатор компонента для навигации к нему на HTML-странице. Подробнее см. HTML id Attribute или ID

Тип: string

Label

Надпись над компонентом.

Тип: string

LocalizationDictionary

Имя словаря для локализации любых надписей, используемых в компоненте ColorPicker

Тип: string

MaxLength

Максимальная длина вводимой строки.

Тип: number

Значение по умолчанию: 30

Mode

Режим выбора цвета.

Тип: enum

Значение по умолчанию: Full

Возможные значения:

Picker - Позволяет выбирать любой цвет из отображаемого спектра Pallete - Предлагает выбор из существующей палитры дизайн-системы Платформы или переданного массива цветов Colors Full - Обьединяет режимы Picker и Pallete

Model

Псевдоним свойств Value и OutputValue. Пример использования Model см. в статье Валидация данных перед отправкой на сервер.

Тип: any

NoWriteOnInit

Признак отказа от записи данных в переменную, заданную в свойствах OutputValue или Model, при создании компонента.

Тип: boolean

OnBlur

Обработчик события потери фокуса компонентом. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа FocusEvent.

Пример:

OnBlur={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnChange

Обработчик события изменения свойства Value компонента. Не имеет параметров.

Пример:

OnChange={() => {
  // Вывод сообщения в консоль браузера
  console.log("Компонент изменен");
  }
}

Тип: undefined

OnClick

Обработчик события нажатия левой кнопки мыши, когда указатель мыши находится на компоненте.

В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnClick={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}  

Тип: undefined

OnDelay

Обработчик события изменения свойства Value компонента, вызываемый по истечении секунды после последнего изменения Value. Не имеет параметров.

Пример:

OnDelay={() => {
  // Вывод сообщения в консоль браузера
  console.log("Прошло более секунды после изменения компонента");
  }
}

Тип: undefined

OnEnterKeyDown

Обработчик события нажатия кнопки Enter. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnEnterKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnKeyDown

Обработчик события нажатия любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnKeyUp

Обработчик события отпускания любой клавиши клавиатуры. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа KeyboardEvent.

Пример:

OnKeyUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseDown

Обработчик события нажатия любой кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseDown={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseEnter

Обработчик события перемещения указателя мыши на компонент. Событие срабатывает только в случае, если указатель мыши находится за пределами компонента и пользователь перемещает указатель мыши внутрь компонента. Если указатель мыши в текущий момент находится внутри компонента, для срабатывания события пользователь должен переместить указатель мыши за пределы компонента, а затем обратно внутрь компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseEnter={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseLeave

Обработчик события перемещения указателя мыши за пределы компонента. Событие срабатывает, только если указатель мыши находится внутри компонента, а пользователь перемещает указатель мыши за пределы компонента. Если указатель мыши в текущий момент находится за пределами компонента, для срабатывания события пользователь должен переместить указатель мыши внутрь компонента, а затем обратно за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseLeave={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseMove

Обработчик события наведения указателя мыши на компонент. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseMove={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOut

Обработчик события перемещения указателя мыши за пределы компонента. Когда пользователь наводит указатель мыши на компонент, происходит одно событие MouseOver, за которым следует одно или несколько событий MouseMove, когда пользователь перемещает указатель мыши внутри компонента. Одно событие MouseOut возникает, когда пользователь выводит указатель мыши за пределы компонента. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOut={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseOver

Обработчик события перемещения указателя мыши на компонент. Событие возникает, когда пользователь наводит указатель мыши на компонент, и не повторяется до тех пор, пока пользователь не выведет указатель мыши за пределы компонента и затем не вернет его обратно. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseOver={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnMouseUp

Обработчик события отпускания кнопки мыши, когда указатель мыши находится на компоненте. В качестве параметра принимает объект типа объект события компонента экранной формы с дополнительными полями типа MouseEvent.

Пример:

OnMouseUp={() => {
  // Получение параметра события
  const event = getEvent();
  // Вывод параметра события в консоль браузера
  console.log(event);
  }
}

Тип: undefined

OnUnmount

Обработчик события размонтирования согласно жизненному циклу экранной формы. Не имеет параметров.

Пример:

OnUnmount={() => {
  // Отмена выполнения периодического действия при размонтировании экранной формы
    return clearInterval(getValue("pleerInterval"))
  }
}

Тип: undefined

OutputState

Имя переменной для записи результата валидации выбранного или введенного в компоненте значения. Пример использования OutputState см. в статье Валидация данных перед отправкой на сервер.

Тип: any

OutputValue

Выходной параметр компонента: введенное или выбранное в компоненте значение.

Тип: any

ReadOnly

Признак запрета на редактирование компонента c возможностью копирования содержимого.

Тип: boolean

Required

Признак обязательности заполнения. Не влияет на валидацию, отображает звездочку справа от компонента.

Тип: boolean

Size

Размер компонента

Тип: enum

Значение по умолчанию: Large

Возможные значения:

Mini - Размер компонента 12х12 px; поле текстового ввода не отображается Small - Размер компонента 16х16 px; поле текстового ввода не отображается Medium - Размер компонента 44х24 px; поле текстового ввода отображается Large - Размер компонента 32х32 px; поле текстового ввода отображается

Slot

Именованное пространство во фрагменте экранной формы или именованное пространство в шаблоне компонента с возможностью шаблонизации, например, Select, DataGrid.

Тип: string

Text

Заполнитель или замещающий текст.

Тип: string

Текст, отображаемый при наведении указателя мыши на компонент. Текст отображается на черном фоне.

Тип: any

TraceId

Идентификатор для отслеживания состояния компонента исходя из жизненного цикла экранной формы. Используется для выполнения фрагмента кода по изменению состояния компонента

Тип: string

Validation

Признак ошибки валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо Validation рекомендуется использовать свойство Error.

Тип: boolean

Value

Входной параметр компонента: введенное или выбранное в компоненте значение.

Тип: any

Visible

Признак инверсии состояния компонента Скрыт.

Тип: boolean

Значение по умолчанию: True

Примеры

JSX:

<Group Mode="Column">
  <Text Mode="Medium_16" Value="Size" CSS={['m-4']} />
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Mini" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color1" Size="Mini" CSS={['m-4']} />
    </Group>
  </Group>
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Small" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color2" Size="Small" CSS={['m-4']} />
    </Group>
  </Group>
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Medium" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color3" Size="Medium" CSS={['m-4']} />
    </Group>
  </Group>
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Large" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color4" Size="Large" CSS={['m-4']} />
    </Group>
  </Group>
  <Text Mode="Medium_16" Value="Mode" CSS={['m-4','mt-24']} />
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Picker" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color5" Mode="Picker" CSS={['m-4']} />
    </Group>
  </Group>
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Pallete" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color6" Mode="Pallete" CSS={['m-4']} />
    </Group>
  </Group>
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Full" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color7" Mode="Full" CSS={['m-4']} />
    </Group>
  </Group>
  <Text Mode="Medium_16" Value="HueMode" CSS={['m-4','mt-24']} />
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Dark" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color8" HueMode="Dark" CSS={['m-4']} />
    </Group>
  </Group>
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Light" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color9" HueMode="Light" CSS={['m-4']} />
    </Group>
  </Group>
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Full" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color10" HueMode="Full" CSS={['m-4']} />
    </Group>
  </Group>
  <Text Mode="Medium_16" Value="Colors" CSS={['m-4','mt-24']} />
  <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Array" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color11" Colors={['blue','green']} CSS={['m-4']} />
    </Group>
  </Group>
    <Group Mode="Row" VerticalAlign="Center" Height="auto">
    <Text Mode="Medium_14" Value="Object" CSS={['m-4']} />
    <Group  Width="auto">
      <ColorPicker Model-var="color12" Colors={{"BLUE_1":"blue","GREEN_1":"green"}} CSS={['m-4']} />
    </Group>
  </Group>
</Group>
    
    
    
    

Свойства​

Autofocus​

Badge​

CSS​

Colors​

CombineConfig​

DataHint​

Disabled​

Error​

ErrorMessage​

Focused​

Hidden​

HighlightError​

Hint​

HintPosition​

HueMode​

Id​

Label​

LocalizationDictionary​

MaxLength​

Mode​

Model​

NoWriteOnInit​

OnBlur​

OnChange​

OnClick​

OnDelay​

OnEnterKeyDown​

OnKeyDown​

OnKeyUp​

OnMouseDown​

OnMouseEnter​

OnMouseLeave​

OnMouseMove​

OnMouseOut​

OnMouseOver​

OnMouseUp​

OnUnmount​

OutputState​

OutputValue​

ReadOnly​

Required​

Size​

Slot​

Text​

Tooltip​

TraceId​

Validation​

Value​

Visible​

Примеры​

Свойства

Autofocus

Badge

CSS

Colors

CombineConfig

DataHint

Disabled

Error

ErrorMessage

Focused

Hidden

HighlightError

Hint

HintPosition

HueMode

Id

Label

LocalizationDictionary

MaxLength

Mode

Model

NoWriteOnInit

OnBlur

OnChange

OnClick

OnDelay

OnEnterKeyDown

OnKeyDown

OnKeyUp

OnMouseDown

OnMouseEnter

OnMouseLeave

OnMouseMove

OnMouseOut

OnMouseOver

OnMouseUp

OnUnmount

OutputState

OutputValue

ReadOnly

Required

Size

Slot

Text

Tooltip

TraceId

Validation

Value

Visible

Примеры