Tab Panels

Context

This tab-panel component gathers all the related contents or another resources of the main element displayed, in order to save vertical space. Clicking on the tab will activate the created panel to show the content.

Mainly is used within the layout_item or the layout_center, after the main content of the resource.

Usage

This component receives an array of hashes, and rearrange the output of each item into a tab-panel structure. Available properties for each panel:

enabled: Boolean. Conditionally render the tab

id: String. Unique id

text: String. Tab title

icon: String. Remixicon key

method: Symbol. Any function rails understands

args: Array. Arguments for the previous method

Display Values
I am an announcement 
[
  {
    "enabled": true,
    "id": "button",
    "text": "Button",
    "icon": "images",
    "method": "cell",
    "args": [
      "decidim/button",
      {
        "text": "Send"
      }
    ]
  },
  {
    "enabled": true,
    "id": "announce",
    "text": "Announcement",
    "icon": "documents",
    "method": "cell",
    "args": [
      "decidim/announcement",
      "I am an announcement"
    ]
  }
]

plain text

[
  {
    "enabled": true,
    "id": "icon",
    "text": "Icon",
    "method": "icon",
    "args": [
      "question-line",
      {
        "class": "w-4 h-4"
      }
    ]
  },
  {
    "enabled": true,
    "id": "text",
    "text": "Plain",
    "method": "content_tag",
    "args": [
      "p",
      "plain text",
      {
        "class": "text-left"
      }
    ]
  }
]

Source code on GitHub: decidim-core/app/cells/decidim/tab_panels