---
title: Komponenty
description: Dokumentacja komponentów bezstanowych prymitywów Vue w @open-pencil/vue.
---

# Komponenty

`@open-pencil/vue` udostępnia bezstanowe prymitywy strukturalne do okablowania kanvasu, UI nawigacji, paneli właściwości i skupionych kontrolek wejścia.

## Podstawowe prymitywy edytora

<SdkCardGroup>
  <SdkCard title="CanvasRoot" to="/programmable/sdk/api/components/canvas-root" description="Bezstanowa struktura kanvasu i kontekst." />
  <SdkCard title="CanvasSurface" to="/programmable/sdk/api/components/canvas-surface" description="Prymityw elementu canvas powiązany z kontekstem CanvasRoot." />
  <SdkCard title="LayerTreeRoot" to="/programmable/sdk/api/components/layer-tree-root" description="Bezstanowy prymityw drzewa warstw." />
  <SdkCard title="LayerTreeItem" to="/programmable/sdk/api/components/layer-tree-item" description="Prymityw jednego wiersza drzewa warstw." />
  <SdkCard title="ToolbarRoot" to="/programmable/sdk/api/components/toolbar-root" description="Bezstanowy prymityw paska narzędzi." />
  <SdkCard title="ToolbarItem" to="/programmable/sdk/api/components/toolbar-item" description="Prymityw jednego narzędzia paska narzędzi." />
  <SdkCard title="PageListRoot" to="/programmable/sdk/api/components/page-list-root" description="Bezstanowy prymityw listy stron." />
</SdkCardGroup>

## Prymitywy panelu właściwości

<SdkCardGroup>
  <SdkCard title="PropertyListRoot" to="/programmable/sdk/api/components/property-list-root" description="Bezstanowy prymityw listy właściwości." />
  <SdkCard title="PropertyListItem" to="/programmable/sdk/api/components/property-list-item" description="Prymityw wiersza wypełnień, obrysów lub efektów." />
  <SdkCard title="PositionControlsRoot" to="/programmable/sdk/api/components/position-controls-root" description="Kontrolki pozycji, rozmiaru i transformacji." />
  <SdkCard title="LayoutControlsRoot" to="/programmable/sdk/api/components/layout-controls-root" description="Kontrolki auto-layoutu i rozmiaru." />
  <SdkCard title="AppearanceControlsRoot" to="/programmable/sdk/api/components/appearance-controls-root" description="Kontrolki przezroczystości, widoczności i promienia narożnika." />
  <SdkCard title="TypographyControlsRoot" to="/programmable/sdk/api/components/typography-controls-root" description="Kontrolki czcionki, wyrównania i formatowania." />
</SdkCardGroup>

## Selektory i pola wejściowe

<SdkCardGroup>
  <SdkCard title="ColorPickerRoot" to="/programmable/sdk/api/components/color-picker-root" description="Prymityw selektora kolorów oparty na popover." />
  <SdkCard title="ColorInputRoot" to="/programmable/sdk/api/components/color-input-root" description="Bezstanowy pomocnik pola wejściowego koloru." />
  <SdkCard title="FontPickerRoot" to="/programmable/sdk/api/components/font-picker-root" description="Przeszukiwalny prymityw selektora czcionek." />
  <SdkCard title="GradientEditorRoot" to="/programmable/sdk/api/components/gradient-editor-root" description="Prymityw korzenia do edycji gradientów." />
  <SdkCard title="GradientEditorBar" to="/programmable/sdk/api/components/gradient-editor-bar" description="Przeciągany prymityw paska gradientu." />
  <SdkCard title="GradientEditorStop" to="/programmable/sdk/api/components/gradient-editor-stop" description="Prymityw jednego punktu zatrzymania gradientu." />
  <SdkCard title="NumberField" to="/programmable/sdk/api/components/number-field" description="Numeric field with scrubbing, expressions, and keyboard stepping." />
</SdkCardGroup>