SColorPickerComponent

Platform  

html

   │    Support  

Chromium supported

Firefox supported

Safari supported

Edge supported

Since  2.0.0

   │   

Olivier Bossel

   │   

beta

  Preview

  Features

• All the Pickr features are supported

• Full support for sugar theming system for easy integration

  Import

  Install

  Events

1. s-color-picker.change

   Dispatched when the color picker change the input value

2. s-color-picker

   Dispatched for every events of this component. Check the detail.eventType prop for event type

  Interface

1. name

   color

   String

   Specify the name that will be assigned to the injected input if you don't provide one yourself

2. value

   String

   Specify the initial value for your picker

3. updateInput

   ["pointerup","validate","eyedropper","reset","clear","close"]

   • pointerdown
   • pointerup
   • pointermove
   • validate
   • eyedropper
   • reset
   • clear
   • close

   Array<String>

   Specify when you want to updat the attached input. Can be "pointermove", "pointerup", "pointerdown", "input", "validate", "close"

4. format

   hex

   • hex
   • hexa
   • rgb
   • rgba
   • hsl
   • hsla

   String

   Specify the format of the color you want as end in the input value. Can be "hex", "hexa", "rgb", "rgba", "hsl" or "hsla"

5. inline

   false

   Boolean

   Specify if you want to initalize the color picker inline or if you want it to be displayed only when the focus is in the input

6. i18n

   {"reset":"Reset","clear":"Clear","validate":"Validate"}

   Object

   Specify some translations for the color picker. You can translate the "reset", "clear" and "validate" buttons

7. placeholder

   Select a color

   String

   Specify the placeholder that will be assigned to the injected input if you don't provide one yourself

8. backdrop

   false

   Boolean

   Specify if you want the ".s-backdrop" element or not

9. eyeDropper

   true

   Boolean

   Specify if you want the eye dropper capability to pick a color anywhere on the screen or not

10. actions

    ["reset","validate"]

    • clear
    • reset
    • validate

    Array<String>

    Specify the actions buttons you want to display. Can be "clear", "reset" and "validate". If false, hide all button

11. floatSettings

    {"position":"auto","shift":10,"offset":0,"arrow":false,"arrowSize":15,"arrowPadding":10}

    Object

    Specify some float settings to pass to the "makeFloat" function of the sugar toolkit

12. eyeDropperIconClass

    s-icon s-icon--eye-dropper

    String

    Specify the class you want to apply on the "i" that display the "eyeDropper" icon

13. copyIconClass

    s-icon s-icon--copy

    String

    Specify the class you want to apply on the "i" that display the "copy" icon

14. copiedIconClass

    s-icon s-icon--copied

    String

    Specify the class you want to apply on the "i" that display the "copy" icon when the color has been copied

15. buttonIconClass

    s-icon s-icon--color

    String

    Specify the class you want to apply on the injected button icon

16. backdropClass

    s-backdrop

    String

    Specify the class to apply on the backdrop when the "backdrop" prop is true

17. disabled

    false

    Boolean

    Specify if the color picker is disabled