Skip to main content

<ColorPickerComponent/>

A helper component that offers the ability to change color and keep a history of selected colors, for use with an InspectorComponent.

Usage​

If you haven't yet read the docs for InspectorComponent we'd recommend it.

This component is used in the template for an inspector. You need to pass in the name of the property to manage.

<script lang="ts">

import { InspectorComponent, ColorPickerComponent } from "@visuallyjs/browser-ui-svelte"
import {Base} from "@visuallyjs/browser-ui";

let current = $state<Base|null>(null)

</script>

<InspectorComponent bind:current={current}>

<ColorPickerComponent propertyName="bgColor"/>

</InspectorComponent>
ColorPickerComponentProps
Props for the ColorPicker inspector component.
NameTypeDescription
maxColors?numberMaximum color swatches to show. Defaults to 10.
propertyNamestringProperty name in the data that this picker represents. Required.