Panel

A Panel is a flexible container used in patterns like dropdowns, filter groups, or detail sections. It can be horizontal or vertical, with size defined by its content and context. Its appearance should remain consistent regardless of usage.

Source Code

uikit-react-core

Usage

Panel Content

<HvPanel className="h-100px">Panel Content</HvPanel>

<HvPanel className="h-100px">Panel Content</HvPanel>

With scroll

If you give fixed dimensions to the panel and the content exceeds the dimensions, the panel will automatically add a scrollbar.

abcdefghijklmnopqrstuvwxyz

export default function Demo() {
  const chars = "abcdefghijklmnopqrstuvwxyz";
  return (
    <HvPanel
      className="size-300px whitespace-nowrap tracking-1rem"
      tabIndex={0}
    >
      {[...chars].map((char, i) => (
        <div key={i}>{i === 0 ? chars : char}</div>
      ))}
    </HvPanel>
  );
}

export default function Demo() {
  const chars = "abcdefghijklmnopqrstuvwxyz";
  return (
    <HvPanel
      className="size-300px whitespace-nowrap tracking-1rem"
      tabIndex={0}
    >
      {[...chars].map((char, i) => (
        <div key={i}>{i === 0 ? chars : char}</div>
      ))}
    </HvPanel>
  );
}