GradientEditorStop

GradientEditorStop создаёт полиморфную точку градиента и сообщает состояние выбора и перетаскивания. В интерактивном режиме используется роль ARIA slider, а положение передаётся в процентах через атрибуты ARIA.

Размещайте интерактивные точки на полосе градиента. Стрелки изменяют положение на positionStep, а с Shift — с шагом в десять раз больше. Home и End перемещают точку к границам. Delete и Backspace вызывают remove, если точку разрешено удалить.

Обработанные клавиши не передаются выше, поэтому сочетания редактора для удаления и перемещения не запускаются. Tab последовательно переводит фокус между точками.

Установите interactive="false", если компонент служит обёрткой для сложной строки точки. Действия слота и атрибуты data-selected и data-dragging сохраняются, но строка не попадает в порядок обхода ползунков клавишей Tab.

vue

<script setup lang="ts">
import type { GradientStop } from '@open-pencil/scene-graph'
import { GradientEditorStop
 } from '@open-pencil/vue'

const stop
: GradientStop = {
  color
: { r
: 0.4, g
: 0.2, b
: 0.9, a
: 1 },
  position
: 0.5
}
</script>

<template>
  <GradientEditorStop

    :
stop
="stop
"
    :
index
="0"
    active

    label
="Средняя точка градиента"
    @update-position
="(_index
, position
) => console
.log
(position
)"
  />
</template>

Сгенерированный справочник API