Lowdefy

Collapse

areas: [key]

A container with collapsible panels. The area keys are user defined, and should be listed under the panels property. Each panel also has a 'extra' content area, the key of which can be defined in the panels.$.extraKey property.

Panel 1
panel1Extra
panel1
id: block_id
type: Collapse
properties:
  panels:
    - key: panel1
      extraKey: panel1Extra
      title: Panel 1
      disabled: false
    - key: panel2
      title: Panel 2
      disabled: false
      extraKey: null
    - key: panel3
      disabled: true
      title: Panel 3
      extraKey: null

properties:
If true, only one panel is open at a time.
Current panel's key.
Toggles rendering of the border around the collapse block.
Initial active panel's key, if activeKey is not set.
Destroy inactive panel.
Name of an React-Icon (See all icons) or properties of an Icon block for expand icon on the right of selector.
Set position of expand icon.
Force render for all panels.
panels:
  • Disable the panel if true.
    Key for the extra area of the panel.
    Key of the panel.
    Title of the panel - supports html.
    AiOutlineMinusCircle
  • Disable the panel if true.
    Key for the extra area of the panel.
    Key of the panel.
    Title of the panel - supports html.
    AiOutlineMinusCircle
  • Disable the panel if true.
    Key for the extra area of the panel.
    Key of the panel.
    Title of the panel - supports html.
    AiOutlineMinusCircle
Show expand icon.
type: object
properties:
  type: object
  properties:
    type: object
    additionalProperties: false
    properties:
      accordion:
        type: boolean
        default: false
        description: If true, only one panel is open at a time.
      activeKey:
        type: string
        description: Current panel's key.
      bordered:
        type: boolean
        default: true
        description: Toggles rendering of the border around the collapse block.
      defaultActiveKey:
        type: string
        description: Initial active panel's key, if activeKey is not set.
      destroyInactivePanel:
        type: boolean
        default: false
        description: Destroy inactive panel.
      expandIcon:
        type:
          - string
          - object
        description: Name of an React-Icon (See <a
          href='https://react-icons.github.io/react-icons/'>all icons</a>) or
          properties of an Icon block for expand icon on the right of selector.
      expandIconPosition:
        type: string
        enum:
          - left
          - right
        default: left
        description: Set position of expand icon.
      forceRender:
        type: boolean
        default: "false"
        description: Force render for all panels.
      panels:
        type: array
        items:
          type: object
          properties:
            title:
              type: string
              description: Title of the panel - supports html.
            key:
              type: string
              description: Key of the panel.
            extraKey:
              type: string
              description: Key for the extra area of the panel.
            disabled:
              type: boolean
              default: false
              description: Disable the panel if true.
      showArrow:
        type: boolean
        default: true
        description: Show expand icon.
  events:
    type: object
    additionalProperties: false
    properties:
      onChange:
        type: array
        description: Trigger actions when collapse item is toggled.