---
title: Компоненты
description: Справочник компонентов без встроенного оформления из пакета @open-pencil/vue.
---

# Компоненты

`@open-pencil/vue` предоставляет компоненты без встроенного оформления для холста, навигации, панелей свойств и специализированных полей ввода.

## Основные компоненты редактора

<SdkCardGroup>
  <SdkCard title="CanvasRoot" to="/programmable/sdk/api/components/canvas-root" description="Структура и контекст холста." />
  <SdkCard title="CanvasSurface" to="/programmable/sdk/api/components/canvas-surface" description="Элемент canvas, подключённый к CanvasRoot." />
  <SdkCard title="LayerTreeRoot" to="/programmable/sdk/api/components/layer-tree-root" description="Дерево слоёв без встроенного оформления." />
  <SdkCard title="LayerTreeItem" to="/programmable/sdk/api/components/layer-tree-item" description="Одна строка дерева слоёв." />
  <SdkCard title="ToolbarRoot" to="/programmable/sdk/api/components/toolbar-root" description="Состояние и действия панели инструментов." />
  <SdkCard title="ToolbarItem" to="/programmable/sdk/api/components/toolbar-item" description="Один инструмент на панели." />
  <SdkCard title="PageListRoot" to="/programmable/sdk/api/components/page-list-root" description="Список страниц без встроенного оформления." />
</SdkCardGroup>

## Панель свойств

<SdkCardGroup>
  <SdkCard title="PropertySection" to="/programmable/sdk/api/components/property-section" description="Сворачиваемый раздел свойств и пустые состояния." />
  <SdkCard title="PropertyGrid" to="/programmable/sdk/api/components/property-grid" description="Адаптивная сетка полей и область действий." />
  <SdkCard title="SegmentedControl" to="/programmable/sdk/api/components/segmented-control" description="Доступная группа для выбора значений или отдельных действий." />
  <SdkCard title="PropertyListRoot" to="/programmable/sdk/api/components/property-list-root" description="Список повторяющихся свойств без встроенного оформления." />
  <SdkCard title="PropertyListItem" to="/programmable/sdk/api/components/property-list-item" description="Строка заливки, обводки или эффекта." />
  <SdkCard title="PositionControlsRoot" to="/programmable/sdk/api/components/position-controls-root" description="Положение, размер и преобразования." />
  <SdkCard title="LayoutControlsRoot" to="/programmable/sdk/api/components/layout-controls-root" description="Автоматическая компоновка и режимы размеров." />
  <SdkCard title="ConstraintsControlRoot" to="/programmable/sdk/api/components/constraints-control-root" description="Ограничения дочернего объекта фрейма и действия над ними." />
  <SdkCard title="AppearanceControlsRoot" to="/programmable/sdk/api/components/appearance-controls-root" description="Прозрачность, видимость и радиус углов." />
  <SdkCard title="TypographyControlsRoot" to="/programmable/sdk/api/components/typography-controls-root" description="Шрифт, выравнивание и форматирование." />
</SdkCardGroup>

## Выбор значений и поля ввода

<SdkCardGroup>
  <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Выбор цвета для размещения во всплывающей панели." />
  <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Поле ввода цвета без встроенного оформления." />
  <SdkCard title="ChannelSlider" to="/programmable/sdk/api/components/channel-slider" description="Доступный ползунок каналов OkHCL." />
  <SdkCard title="FillRoot" to="/programmable/sdk/api/components/fill-root" description="Тип заливки и действия преобразования." />
  <SdkCard title="FillSwatch" to="/programmable/sdk/api/components/fill-swatch" description="Образец заливки с поддержкой привязки." />
  <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Выбор шрифта с поиском." />
  <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Состояние редактора градиента." />
  <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Интерактивная полоса градиента." />
  <SdkCard title="GradientEditorStop" to="/programmable/sdk/api/components/gradient-editor-stop" description="Одна точка градиента." />
  <SdkCard title="NumberField" to="/programmable/sdk/api/components/number-field" description="Числовое поле с перетаскиванием, выражениями и изменением с клавиатуры." />
  <SdkCard title="BindableValue" to="/programmable/sdk/api/components/bindable-value" description="Связь значений с переменными и внешними токенами через поставщика данных." />
</SdkCardGroup>