Size Constraints

Panels with percentage and pixel minSize/maxSize limits.

Use size constraints when a panel has a real lower or upper bound, like a navigator that should not collapse past its content. Drag handles toward the constrained panels until they stop moving.

Double-click a divider when you want to send adjacent panels back to their defaultSize ratio. The reset still runs through the same minSize and maxSize constraints as normal dragging.

The container resize demo shows the same rules applying when the available area changes: proportions are preserved where possible, then min and max sizes clamp the result.

const constraintsLayout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'navigator',
      size: 24,
      minSize: '180px',
      maxSize: '34%',
      tabs: [
        {
          id: 'navigator-tab',
          data: {
            title: 'Navigator',
            summary: 'This sidebar can resize, but it stays narrow.',
            constraints: 'minSize: 180px, maxSize: 34%',
          },
          closable: false,
        },
      ],
    },
    {
      type: 'group',
      direction: 'vertical',
      size: 76,
      children: [
        {
          type: 'group',
          direction: 'horizontal',
          size: 68,
          children: [
            {
              type: 'panel',
              id: 'editor',
              size: 68,
              minSize: '320px',
              tabs: [
                {
                  id: 'editor-tab',
                  data: {
                    title: 'Editor',
                    summary:
                      'The main work area keeps enough room for readable content.',
                    constraints: 'minSize: 320px',
                  },
                },
              ],
            },
            {
              type: 'panel',
              id: 'inspector',
              size: 32,
              minSize: '180px',
              maxSize: '36%',
              tabs: [
                {
                  id: 'inspector-tab',
                  data: {
                    title: 'Inspector',
                    summary: 'The right panel is bounded on both sides.',
                    constraints: 'minSize: 180px, maxSize: 36%',
                  },
                },
              ],
            },
          ],
        },
        {
          type: 'panel',
          id: 'console',
          size: 32,
          minSize: '140px',
          maxSize: '42%',
          tabs: [
            {
              id: 'console-tab',
              data: {
                title: 'Console',
                summary:
                  'The bottom panel has vertical constraints independent of the side panels.',
                constraints: 'minSize: 140px, maxSize: 42%',
              },
              closable: false,
            },
          ],
        },
      ],
    },
  ],
};

<Tilery<TabData>
  initialLayout={constraintsLayout}
  minSize={10}
  renderTabHeader={renderHeader}
  renderTabContent={renderContent}
/>
const containerResizeLayout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'resize-sidebar',
      size: 40,
      minSize: '240px',
      tabs: [
        {
          id: 'resize-sidebar-tab',
          data: {
            title: 'Sidebar',
            summary: 'This panel keeps at least 240px as the wrapper narrows.',
            constraints: 'minSize: 240px',
          },
          closable: false,
        },
      ],
    },
    {
      type: 'panel',
      id: 'resize-workspace',
      size: 60,
      minSize: '220px',
      tabs: [
        {
          id: 'resize-workspace-tab',
          data: {
            title: 'Workspace',
            summary:
              'Proportions stay stable until a measured constraint needs space.',
            constraints: 'minSize: 220px',
          },
        },
      ],
    },
  ],
};

const [width, setWidth] = useState(widths[2]!.value);

<Tilery<TabData>
  initialLayout={containerResizeLayout}
  minSize={10}
  renderTabHeader={renderHeader}
  renderTabContent={renderContent}
/>
const defaultResetLayout: TileryInitialLayout<TabData> = {
  type: 'group',
  direction: 'horizontal',
  children: [
    {
      type: 'panel',
      id: 'reset-navigator',
      size: 50,
      defaultSize: 30,
      minSize: '180px',
      tabs: [
        {
          id: 'reset-navigator-tab',
          data: {
            title: 'Navigator',
            summary:
              'Double-click the divider to return this panel to its 30% reset target.',
            constraints: 'size: 50, defaultSize: 30, minSize: 180px',
          },
          closable: false,
        },
      ],
    },
    {
      type: 'panel',
      id: 'reset-editor',
      size: 50,
      defaultSize: 70,
      minSize: '220px',
      tabs: [
        {
          id: 'reset-editor-tab',
          data: {
            title: 'Editor',
            summary:
              'Reset keeps the default ratio stable even after several manual resizes.',
            constraints: 'size: 50, defaultSize: 70, minSize: 220px',
          },
        },
      ],
    },
  ],
};

<Tilery<TabData>
  initialLayout={defaultResetLayout}
  minSize={10}
  renderTabHeader={renderHeader}
  renderTabContent={renderContent}
/>

Related