Skip to content

Containers

Containers can contain any widgets.

Panel

Panels can contains tabs or widgets. These can be absolutely positioned and can overflow their parent's size (which will then display scrollbars). When a panel contains tabs, it can send and receive its active tab's index through osc.

{
    type:'panel',
    // etc
}

scroll

  • type: boolean
  • default: true
  • usage: set to false to disable scrollbars

border

  • type: boolean
  • default: true
  • usage: by default, widgets in panels/strip have their border disabled, except for panels and strips. Set to false to apply this rule to the panel too.

widgets

  • type: array
  • default: []
  • usage: each element of the array must be a widget object. A panel cannot contain widgets and tabs simultaneously.

tabs

  • type: array
  • default: []
  • usage: each element of the array must be a tab object. A panel cannot contain widgets and tabs simultaneously.

variables

  • type: *
  • default: @{parent.variables}
  • usage: defines one or more arbitrary variables that can be inherited by children widgets.
  • examples:
  • 1 (@{parent.variables} will return 1)
  • {a: [1, 2], b: 2} (@{parent.variables.a} will return [1, 2])
  • [1, 2] (@{parent.variables.0} will return 1)
  • @{parent.variables} useful when nesting containers

layout

spacing

  • type: integer|array
  • default: 0
  • usage: spacing size used in layout expression, can be set as a [vertical,horizontal] array.
  • note: this only applies when the panel contains widgets, not tabs

css

--nav-height: number[rem|%];

Strip

Unidirectionnal panel with stretching capability. By default, children widgets that don't have an explicit width/height set will be shrinked to respect the sizes specified by others. Adding flex:1; to a children's css will give it the ability the fill the remaining space. Multiple children can have a flex:x; css property (x will ponderate their expansion).

{
  type:'strip',
  // etc
}

horizontal

  • type: boolean
  • default: false
  • usage: set to true to display widgets horizontally

stretch

  • type: boolean
  • default: false
  • usage: set to true to stretch widgets evenly

spacing

  • type: integer|percentage
  • default: 0
  • usage: adds space between widgets. Percents are always relative to the strips width.

border

  • type: boolean
  • default: true
  • usage: by default, widgets in panels/strip have their border disabled, except for panels and strips. Set to false to apply this rule to the strip too.

widgets

  • type: array
  • default: []
  • usage: each element of the array must be a widget object

Modals are buttons that turn into a centered popup panels when enabled. They can only contain widgets. They can send and receive their state via osc (1 to enable, 0 to disable).

{
    type:'modal',
    // etc
}

doubleTap

  • type: boolean
  • default: false
  • usage: set to true to make the modal require a double tap to open instead of a single tap

popupWidth / popupHeight

  • type: number|percentage
  • default: 100%
  • usage: sets the modal's size once opened

popupLeft / popupTop

  • type: number|percentage
  • default: auto
  • usage: sets the modal's position once opened (centered by default)

popupLabel

  • type: string
  • default: empty
  • usage: alternative label for the popup

options

Clone

{
    type:'clone',
    // etc
}

widgetId

  • type: string
  • default: empty
  • usage: id of the widget to clone

props

  • type: object
  • default: {}
  • usage: cloned widget's properties to override
  • example:
    {
        "variables": { "n": 2 },
        "color": "orange"    
    }