Panel

A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section). It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns. Regardless of its content, a panel look and feel should be consistent.

Source Code

uikit-react-core

Usage

Panel Content

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

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

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>
  );
}

Pagination Radio