Color Picker

Syed Wahaj

Last Update 2 jaar geleden

Description

🔗 Demo Page: https://chakor-plugin-demo-2.bubbleapps.io/version-test/color_picker

🔗 Editor Link: https://bubble.io/page?id=chakor-plugin-demo-2&tab=tabs-1&name=color_picker&type=page


Introducing our latest plugin: Color Picker


This plugin offers a highly customizable color picker with dynamic options, allowing you to tailor its functionality to fit your needs. It features up to six components that can be individually shown or hidden using toggles. The plugin also provides flexible configuration for component spacing, handle radius, box padding, default color, and component width. You can choose between horizontal and vertical layout directions.
Key Features
  • Customizable Components: Choose from up to six different color picker components, including color wheel, saturation/value box, hue slider, saturation slider, value slider, and transparency slider. Show or hide each component using toggles.

  • Real-Time Color States: Get real-time color values in various formats—hex, rgba, hsl, and hsla. The plugin provides state variables that update dynamically as the color selection changes.

  • Flexible Layout Configuration:  Adjust the spacing between components, handle radius, box padding, and default color. The width of the components can be set to ensure proper sizing, with options for horizontal or vertical layout direction.

Instructions
  • Place the element: Install the plugin and place the element 'color picker' on the page where you desire it to be.
  • Customize Settings: Customize the color picker's settings based upon your design and use-case.
  • Layout and Width: Select a horizontal/vertical layout and width in plugin up to which it will resize the components within it following the layout style.

    • Action

    Set the color programmatically via a workflow action in Bubble.io. This allows you to update the color picker with new values as needed.
    Event
    When this color picker's value changes (runs whenever this element's value is changed and not empty).

    Was this article helpful?

    0 out of 0 liked this article