Altinn Studio Reference User interface Components Tabs

Tabs

A component that allows you to organise and switch between different content in tabs.

🚧 This documentation is a work in progress.

Usage

The Tabs component allows you to organise and switch between different content sections by clicking on the header, allowing for a space-efficient and organized way to present information.

Anatomy

Header: The clickable section title that users interact with to select or switch the content.
Content Area: The area that is revealing or hiding information when the header is clicked.

Properties

Property	Type	Description
`id`	string	Unique ID string for the component.
`size`	string	Sets the size of the tabs. Enum:: `"small" \| "medium" \| "large"` Default: `medium`.
`defaultTab`	string	Configuring a tab to be selected by default.
`tabs`	Array	A list of tab objects containing the config(`id, title, icon, children`) for each tab.
`tabs.id`	string	Unique ID of the tab in question.
`tabs.title`	string	The title for the tab in question.
`tabs.icon`	string	An URL to the icon for the tab in question.
`tabs.children`	Array	The content of the tab in question.

Configuration

Add component

{
 "data": {
    "layout": [
    {
        "id": "tabs",
        "type": "Tabs",
        "tabs": [
         {
           "id": "tab-1",
           "children": ["test-tab-paragraph"],
           "title": "Tab 1",
           "icon": "/ttd/frontend-test/images/altinn-logo.svg"
         },
         {
           "id": "tab-2",
           "children": ["test-tab-paragraph2"],
           "title": "Tab 2"
         }
       ]
    },
  ]
 }
}

defaultTab

The ID of the specific tab that you wish to be selected by default.

Tabs

`id`

A string identifier for the tab. Must be unique within the current list of tabs.

`title`

The title of the tab can be added as text directly or referenced via a text key to a text resource.

`Size`

Sets the size of the tabs. Enum: "small" | "medium" | "large"
Default: medium.

`icon`

A URL path to the icon.

`children`

Defines the components to display when a tab is active by adding their IDs to an array under the children property.

Example

Tabs with paragraphs as child elements.

{
 "data": {
    "layout": [
    {
        "id": "tabs",
        "type": "Tabs",
        "tabs": [
         {
           "id": "tab-1",
           "children": ["test-tab-paragraph"],
           "title": "Tab 1",
           "icon": "/ttd/frontend-test/images/altinn-logo.svg"
         },
         {
           "id": "tab-2",
           "children": ["test-tab-paragraph2"],
           "title": "Tab 2"
         }
       ]
    },
  ]
 }
}