Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Elements
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Elements

Color Picker

The <salla-color-picker> web component is used to select a color using a variety of input methods in a pop-up modal. Listen to events when the user changes the color or when the modal is either closed, open, or the chosen color has been submitted. Several methods can be used as well as customizable properties.

Example#

Color Picker

Usage#

HTML

Properties#

PropertyAttributeDescriptionTypeDefault
ColorcolorThe initial color for the color picker component.string'#5dd5c4'
Enable Alphaenable-alphaWhether or not to enable the adjustment of the alpha channel.booleanfalse
FormatformatDisplays the color picker component in a specific satndard coloring format."hex" | "hsl" | "rgb"'hex'
NamenameFile input name for the native formDatastring'color'
RequiredrequiredWhether or not to set the color picker to be requiredbooleanfalse
Show Cancel Buttonshow-cancel-buttonWhether or not to have a "Cancel" button, which closes the popup modal.booleanfalse
Show Text Fieldshow-text-fieldWhether or not to show a text field for the color value when being edited.booleantrue

Events#

EventDescriptionType
colorChangedThis event will be fired when the color changes.CustomEvent<Color>
popupClosedThis event will be fired when the popup modal closes.CustomEvent<Color>
invalidInputThis event will be fired when the input is invalid.CustomEvent<any>
popupOpenedThis event will be fired when the popup modal opens.CustomEvent<Color>
submittedThis event will be fired when the user clicks on the "Ok" button label.CustomEvent<Color>

Methods#

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, such as openPicker which shows or opens the color picker modal.
MethodDescriptionReturn Type
openPicker()Shows / opens the color picker modal.Promise<void>
closePicker()Closes / hides the color picker modal.Promise<void>
destroyPicker()Releases all resources used by the color picker instance.Promise<void>
movePopUp(options: Options, openImmediately: boolean) Moves the popup modal to a different parent class. It also has option of opening the component at the same time.Promise<void>
setColorValue(color: string, triggerEvent: boolean)Sets / initializes the color picker component's color, which includes the Color name in RGBA/HSLA/HEX string or RGBA array.Promise<void>
setPickerOption(options: Options) Sets the color picker component's options.Promise<void>
Modified at 2025-03-04 12:54:02
Previous
Breadcrumb
Next
Conditional Fields