Panel Locking

Lock panel resizing, dragging, and drop targets.

Panel locking separates resize, drag, and drop behavior so app chrome can stay fixed while other regions remain flexible. Try resizing, dragging from, and dropping into locked panels.

locked: true disables all three interactions, while resizable, draggable, and droppable let you model more specific restrictions.

const layout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'navigator',
      size: 28,
      locked: true,
      tabs: [
        {
          id: 'navigator-tab',
          data: {
            title: 'Navigator',
            behavior: 'locked: true',
            body: 'This panel cannot be resized, dragged from, or used as a drop target.',
          },
          closable: false,
        },
      ],
    },
    {
      type: 'group',
      direction: 'vertical',
      size: 72,
      children: [
        {
          type: 'panel',
          id: 'editor',
          size: 62,
          tabs: [
            {
              id: 'editor-tab',
              data: {
                title: 'Editor',
                behavior: 'default behavior',
                body: 'This panel remains fully interactive.',
              },
            },
            {
              id: 'outline-tab',
              data: {
                title: 'Outline',
                behavior: 'default behavior',
                body: 'Drag this tab to test drop targets around the layout.',
              },
            },
          ],
        },
        {
          type: 'group',
          direction: 'horizontal',
          size: 38,
          children: [
            {
              type: 'panel',
              id: 'terminal',
              size: 50,
              draggable: false,
              tabs: [
                {
                  id: 'terminal-tab',
                  data: {
                    title: 'Terminal',
                    behavior: 'draggable: false',
                    body: 'Tabs in this panel cannot be dragged out by panel-level policy.',
                  },
                },
              ],
            },
            {
              type: 'panel',
              id: 'reference',
              size: 50,
              droppable: false,
              tabs: [
                {
                  id: 'reference-tab',
                  data: {
                    title: 'Reference',
                    behavior: 'droppable: false',
                    body: 'Other tabs cannot be dropped into or split over this panel.',
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  ],
};

<Tilery<TabData>
  initialLayout={layout}
  renderTabHeader={(tab: TileryTab<TabData>) => (
    <span>{tab.data.title}</span>
  )}
  renderTabContent={(tab: TileryTab<TabData>) => (
    <TabContent meta={tab.data.behavior}>
      <p style={{ margin: 0 }}>{tab.data.body}</p>
    </TabContent>
  )}
/>

Concepts — See how panel behavior fits the workspace model.
Layouts & Snapshots — Use layout behavior fields on panels and groups.

Panel Locking

Related