Skip to content
Layout

LayoutPanel

Fixed-width side panel for Layout start/end slots.

Astro source Core source

LayoutPanel

Side panel for Layout start/end slots. Supports fixed width, useResizable integration, and responsive overlay / hidden modes below a breakpoint.

Examples

Default
Demo.tsxtsx
import { useState } from 'react';
import {
  Button,
  Layout,
  LayoutContent,
  LayoutPanel,
  ResizeHandle,
  useResizable,
} from '@var-ui/react';

const { end } = useResizable({
  regions: { end: { defaultWidth: 280, minWidth: 220, maxWidth: 400 } },
});

<Layout
  height="auto"
  padding={0}
  content={<LayoutContent padding={0}>{/* list */}</LayoutContent>}
  end={
    <>
      <LayoutPanel resizable={end} hasDivider label="Details" role="complementary">
        Inspector
      </LayoutPanel>
      <ResizeHandle {...end.handleProps} />
    </>
  }
/>

Props

Accessibility

Set role (e.g. complementary, navigation) and label when the panel is a landmark.