Basic Layout

Two side-by-side panels with one tab each.

Start here if you want the smallest useful Tilery layout: two panels in a horizontal group, each with one tab. Drag the divider to see how the group distributes space between its children.

The code shows how initialLayout, tab headers, and tab content work together before you add nested groups, custom actions, or persistence.

const layout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'left',
      size: 50,
      tabs: [{ id: 'tab-a', data: { title: 'Panel A' } }],
    },
    {
      type: 'panel',
      id: 'right',
      size: 50,
      tabs: [{ id: 'tab-b', data: { title: 'Panel B' } }],
    },
  ],
};

<Tilery<TabData>
  initialLayout={layout}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <span>{tab.data.title}</span>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => (
    <TabContent>
      <p style={{ margin: 0 }}>
        Content for {tab.data.title}. Drag the divider to resize.
      </p>
    </TabContent>
  )}
/>

Related