47 lines
4.8 KiB
Markdown
47 lines
4.8 KiB
Markdown
|
---
|
|||
|
|
title: Компоненты
|
|||
|
|
description: Справочник компонентов — headless-примитивы Vue в @open-pencil/vue.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Компоненты
|
|||
|
|
|
|||
|
|
`@open-pencil/vue` предоставляет headless-структурные примитивы для подключения холста, навигационного UI, панелей свойств и специализированных элементов ввода.
|
|||
|
|
|
|||
|
|
## Основные примитивы редактора
|
|||
|
|
|
|||
|
|
<SdkCardGroup>
|
|||
|
|
<SdkCard title="CanvasRoot" to="/programmable/sdk/api/components/canvas-root" description="Headless-структура холста и контекст." />
|
|||
|
|
<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="Headless-примитив дерева слоёв." />
|
|||
|
|
<SdkCard title="LayerTreeItem" to="/programmable/sdk/api/components/layer-tree-item" description="Примитив одной строки дерева слоёв." />
|
|||
|
|
<SdkCard title="ToolbarRoot" to="/programmable/sdk/api/components/toolbar-root" description="Headless-примитив тулбара." />
|
|||
|
|
<SdkCard title="ToolbarItem" to="/programmable/sdk/api/components/toolbar-item" description="Примитив одного инструмента тулбара." />
|
|||
|
|
<SdkCard title="PageListRoot" to="/programmable/sdk/api/components/page-list-root" description="Headless-примитив списка страниц." />
|
|||
|
|
</SdkCardGroup>
|
|||
|
|
|
|||
|
|
## Примитивы панели свойств
|
|||
|
|
|
|||
|
|
<SdkCardGroup>
|
|||
|
|
<SdkCard title="PropertyListRoot" to="/programmable/sdk/api/components/property-list-root" description="Headless-примитив списка свойств." />
|
|||
|
|
<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="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="Headless-примитив пикера цвета с поповером." />
|
|||
|
|
<SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Headless-хелпер для ввода цвета." />
|
|||
|
|
<SdkCard title="FillPickerRoot" to="/programmable/sdk/api/components/fill-picker-root" description="Headless-примитив пикера заливки с поповером." />
|
|||
|
|
<SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Headless-примитив пикера шрифта с поиском." />
|
|||
|
|
<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="ScrubInputRoot" to="/programmable/sdk/api/components/scrub-input-root" description="Корневой примитив числового ввода с перетаскиванием." />
|
|||
|
|
<SdkCard title="ScrubInputField" to="/programmable/sdk/api/components/scrub-input-field" description="Примитив редактируемого поля ввода." />
|
|||
|
|
<SdkCard title="ScrubInputDisplay" to="/programmable/sdk/api/components/scrub-input-display" description="Примитив отображения без редактирования." />
|
|||
|
|
</SdkCardGroup>
|