🌊
jsf
  • About KalmiaJSF
  • Setup
  • Architecture
  • Contributing
  • Changelog
  • Guides
    • Cheat Sheet
  • Examples
    • Demo example
    • Basic examples
    • Kitchen Sink example
    • Charts example
  • Schema
    • Intro to Schema
    • Prop types
      • String
      • Boolean
      • Number & Integer
      • Object
      • Array
      • Date
      • Id
      • Null
      • Ref
      • Binary
    • Prop options
      • Disabling property
      • On prop init actions
      • Persist
      • On value change
      • On user value change
    • Handlers
      • Color picker
    • Creating custom handler
      • Working with arrays
    • Value provider
  • Validation
    • Custom validation
    • Eval
  • LAYOUT
    • Intro to Layout
    • Layout options
      • Show & hide
      • On click action
  • INTERFACES
    • Value Options
  • Form
    • Form data
  • OTHER
    • Events
    • Lifecycle hooks
    • Notifications support
  • PAGES & COMPONENTS
    • Page
    • Component
  • THEMING
    • Creating new theme variant
  • BUILDER
    • Shortcuts
  • Help
    • FAQ
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Schema
  2. Handlers

Color picker

{
  "schema": {
    "type": "object",
    "properties": {
      "color": {
        "type": "string",
        "title": "Color",
        "handler": {
          "type": "common/color-picker",
          "options": {
            "mode": "custom"
          },
          "values": [
            {
              "value": "color-1",
              "label": "Red",
              "color": "#ff0d1e"
            },
            {
              "value": "color-2",
              "label": "Orange",
              "color": "#ffc318"
            },
            {
              "value": "color-3",
              "label": "Yellow",
              "color": "#feff1c"
            }
          ]
        }
      }
    }
  },
  "layout": {
    "type": "div",
    "items": [{ 
        "key": "color",
        "handlerPreferences": {
            "tilesPerRow": 8
        }
    }]
  }
}
PreviousHandlersNextCreating custom handler

Last updated 4 years ago

Was this helpful?