Component description
The splitter component splits the screen into sections, each with one or multiple components.
The screen can be split into left, right, and center columns with adjustable widths. When multiple components are added to a column, they will be arranged vertically within that section.
Warning
To use the splitter component as intended, make sure to adhere to the following configuration guidelines:
- Column limit the column limit as each section has a minimum width (350px). Configuring more than the recommended number of columns can reduce readability.
- For dashboards: Use up to 3 columns in page templates.
- For object pages: Use up to 2 columns in object type templates.Right panel:- Avoid using the splitter in the right panel of a page or object page (including object detail) due to the limited space.
- We recommend using the tabs component instead.Nesting limitations:- A splitter cannot be placed inside a panel. However, components added to the splitter will each be wrapped in a panel.
Example
Two columns, one containing a wordcloud, the other an API chart.
Minimal JSON
{
"type": "splitter",
"sections": [
{
"width": "",
"values": []
}
]
}{
"type": "splitter",
"sections": [
{
"width": "50%",
"values": [
{
"value": "wordcloud",
"type": "component"
}
]
},
{
"width": "50%",
"values": [
{
"value": "chart_visited_pages",
"type": "component"
}
]
}
]
}Example taken from the core_dashboard_adoption package.
Nested properties
| Property | Description | Values | Mandatory |
|---|---|---|---|
type | splitter | string | Yes |
sections | Array of sections the screen is split into. | array | Yes |
componentId | Unique ID of a component. If left empty, a random string will be generated. Primarily used in patch packages to define the component's position within the layout (template). | string | No |
Nested properties in sections
| Property | Description | Values | Mandatory |
|---|---|---|---|
width | Measurement of each section relative to other sections. The value is expressed as a percentage. The minimum width is 25%, if you choose a smaller number, it will not be reflected. | string (XY%) | Yes |
values | Array of components displayed in the splitter section. Components added to the splitter will be wrapped in their own panel. | array | Yes |
innerAlign | [Legacy configuration] Visual alignment of the section. | string* | No |