Option types

When creating an element you're given the ability to create an options list in some places, these options follow a set of rules and are then rendered into actual ui which handle user input. Usually an option is made with the following structure:

{
  label: 'Label'
  type: 'OPTION_TYPE',
  id: 'OPTION_ID',
  props: {...optional},
  unlocks: ...optional
}

Explaining each one with more detail:

• label (String optional) - the option label, can be anything you want
• type (String required) - the option type, you have a list of valid option types which we'll list next
• id (String required) - the option id, this is used to save the option and for you to access it
• props (Object optinal) - some option types allow some extra props to define some of its aspects
• unlocks (Object||Array optional) - some option types allow you to define further options which are unlocked when the option is of a certain value

As said above you have a strict list of option types and some accept extra props, so here's a detailed list of every option type you can use:

Option type	Description	Output	Extra props	Unlocks
String	text input	String	none	-
Number	number input	Number	*(1)	-
Pixels	number input	Number	*(1)	-
Percentage	number input	Number	*(1)	-
Padding	padding input	String	none	-
Margin	margin input	String	none	-
Boolean	checkbox	Boolean	none	-
Color	color input	Object	*(2)	-
Image	image picker	String (id)	none	*(a)
Audio	audio picker	String (id)	none	*(a)
Select	combobox	String	*(3)	*(b)
MenuPicker	menu id picker	String (id)	none	*(a)
SchemaPicker	schema id picker	String (id)	none	*(a)
PagePicker	page id picker	String (id)	none	*(a)
Font	font picker	Object	none	-
Icon	icon picker	Object	none	-
Corners	round corners	String	none	-
Border	border picker	Object	none	-
LineStyle	line style picker	String	none	-
Optional	optional checkbox	Boolean	none	*(a)
Section	section options	none	none	*(a)
Filters	filters picker	Array	none	-
Sorts	sorts picker	Array	none	-

• *(1)

  • min (Number or false optional) - Minimum number allowed. False means to not limit. Default: 0
  • max (Number or false optional) - Maximum number allowed. False means to not limit. Default: false
  • label (String optional) - usually one character or two that illustrates the measurement unit. Example: 'cm'
  • arrows (Boolean optional) - whether to include the up and down arrows. Default: true

• *(2)

  • gradients (Boolean optional) - Set to true if you want to allow creation of gradients. Default: false

• *(3)

  • values (Array required) - Array of options values you want to have on the combobox
  • labels (Array optional) - Array of options labels you want to have on the combobox, if not defined, values are used as labels instead. If defined values and labels array length should be the same

• *(a) - When option set or equal to true, it will render an Array of options set in unlocks

• *(b) - Conditional unlocking, depending on the value, it will unlock a different Array of options. Example:

{
  label: 'Size',
  type: Types.Select,
  id: 'size',
  props: {
    labels: ['Full Width', 'Fit Content', 'Max Width (px)', 'Strict (px)'],
    values: ['full', 'fit', 'max', 'strict']
  },
  unlocks: {
    fit: [
      {
        label: 'Horizontal alignment',
        type: Types.Select,
        id: 'alignment',
        props: {
          labels: ['Left', 'Center', 'Right'],
          values: ['left', 'center', 'right']
        }
      }
    ],
    max: [
      {
        label: 'Max Width',
        type: Types.Pixels,
        id: 'maxWidth'
      }
    ]
  }
}