openpencil/packages/docs/programmable/sdk/api/composables/use-appearance.md
2026-03-24 23:24:08 +03:00

948 B

title description
useAppearance Control visibility, opacity, and corner radius state for the current selection.

useAppearance

useAppearance() is the appearance-focused control composable for property panels.

It exposes selection-derived UI state for:

  • visibility
  • opacity
  • corner radius
  • independent corner radii

Usage

import { useAppearance } from '@open-pencil/vue'

const appearance = useAppearance()

Basic example

const {
  visibilityState,
  opacityPercent,
  cornerRadiusValue,
  toggleVisibility,
  toggleIndependentCorners,
} = useAppearance()

Practical examples

Toggle selection visibility

appearance.toggleVisibility()

Edit per-corner radii

appearance.updateCornerProp('topLeftRadius', 12)
appearance.commitCornerProp('topLeftRadius', 12, 8)