LogoLogo
FeaturesHelp & ResourcesShowcasePricingLogin
Squirrel Addon Documentation
Squirrel Addon Documentation
  • README
  • Table of contents
  • Building an addon
    • Communication
    • Property Panel
      • Property Panel Elements
        • Accordion
        • Checkbox
        • Color Input
        • Conditional Logic
        • Dropdown
        • Font
        • Horizontal Line
        • Input Box
        • Radio Button
        • Series
        • Sub Accordion
        • Text Label
    • Publishing an addon
      • Restricting private addons
      • The review process
      • Add-on submission
        • Icon guidelines
        • Image guidelines
  • introduction
    • Joining the Developer Program
  • past-events
    • Building your first add-on
  • squirrel-helper-library
    • Dot notation
    • Angular
      • Classes
        • SquirrelCanvas
        • SquirrelColor
        • SquirrelMessage
        • SquirrelPosition
        • SquirrelSize
      • Events
        • onInitState
        • onPropertyChange
        • onPropertyChangesComplete
        • onSetCanvas
        • onSetPosition
        • onSetRuntimeMode
        • onSetSize
      • Getting Started
        • Building your first addon
        • Debugging
        • Sending and Receiving Data
        • The JSON files
      • Methods
        • getBindingDimension
        • getCanvas
        • getCopyOfState
        • getGenericProperty
        • getPosition
        • getRuntimeMode
        • getSize
        • initWithSquirrel
        • parseColor
        • sendToSquirrel
        • setPosition
        • setSize
        • shadeColor
        • tintColor
    • JavaScript
      • Classes
        • SquirrelCanvas
        • SquirrelColor
        • SquirrelMessage
        • SquirrelPosition
        • SquirrelSize
      • Events
        • onInitState
        • onPropertyChange
        • onPropertyChangesComplete
        • onSetCanvas
        • onSetPosition
        • onSetRuntimeMode
        • onSetSize
      • Getting Started
        • Building your first add-on
        • Debugging
        • Sending and Receiving Data
        • The JSON files
      • Methods
        • getBindingDimension
        • getCanvas
        • getCopyOfState
        • getGenericProperty
        • getPosition
        • getRuntimeMode
        • getSize
        • initWithSquirrel
        • parseColor
        • sendToSquirrel
        • setPosition
        • setSize
        • shadeColor
        • tintColor
    • React
      • Coming Soon
Powered by GitBook
LogoLogo

Explore

  • Home
  • Features
  • Pricing
  • Download Squirrel

Help

  • Learn
  • Community
  • Support
  • FAQ's

Updates

  • Blog
  • Events
  • Release Notes

Company

  • Contact Us
  • Privacy Policy
  • Terms of Use

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.

On this page

Was this helpful?

  1. Building an addon
  2. Property Panel
  3. Property Panel Elements

Color Input

Color picker with optional opacity

PreviousCheckboxNextConditional Logic

Last updated 3 years ago

Was this helpful?

{
    "type": "ColorOpacityInput",
    "properties": {
        "labelName": "Button Color",
        "bindingPropertyName": "buttonColor",
        "allowCheckbox": false,
        "hasOpacity": false
    }
}

The parent property name needs to match the string specified in bindingPropertyName property. In this example the parent property name is "buttonColor"

{
    "buttonColor": {
        "type": "solid",
        "color": [
            {
                "color": "#22ee33",
                "alpha": 1,
                "ratio": 0
            }
        ],
        "rotation": 0,
        "enabled": true
    }
}

This element has a number of configurable properties. If a property has a default value then you do not need to provide it in the propertyPanel.json file unless you want to specify a value different to the default.

Color is an array in preparation for supporting gradient colours. This is not currently implemented so your color state defintion needs to be an array of just 1 colour object

Configurable properties

bindingPropertyName

string - the parent property name from defaultState with which to connect to.

mandatory

allowCheckbox

bool - specifies whether you want a checkbox to the left of the colour picker.

The checkbox is bound to parentProperty.enabled

defaults to true

hasOpacity

bool - specifies whether you want the opacity input box to appear to the right of the colour picker

defaults to true

disabled

bool - if set to true this will disable the input box for interaction

defaults to false