Skip to Content
ComponentsAtomsResizable

Resizable

Atom

Resizable permite ajustar espaço entre painéis sem perder contexto de decisão.

Use em layouts split: lista + detalhe, timeline + evidência, briefing + fontes. O redimensionamento deve preservar mínimos úteis e oferecer alternativa por teclado quando usado em produto real.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoResizableProps = {
  left: React.ReactNode
  right: React.ReactNode
}
 
export function PulsoResizable({ left, right }: PulsoResizableProps) {
  const [leftWidth, setLeftWidth] = React.useState(38)
 
  return (
    <section className="grid min-h-72 overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--card)]" style={{ gridTemplateColumns: `${leftWidth}% 10px 1fr` }}>
      <aside className="min-w-48 p-4">{left}</aside>
      <input
        aria-label="Ajustar largura da lista"
        type="range"
        min={28}
        max={55}
        value={leftWidth}
        onChange={(event) => setLeftWidth(Number(event.currentTarget.value))}
        className="h-full cursor-col-resize appearance-none bg-[var(--border)]"
      />
      <main className="min-w-64 border-l border-[var(--border)] p-4">{right}</main>
    </section>
  )
}
<PulsoResizable
  left={<p>Lista de casos</p>}
  right={<p>Detalhe do caso selecionado</p>}
/>

Regras

  • Defina largura mínima para cada painel.
  • Não permita que evidência, ação crítica ou resumo desapareça.
  • Persistência de tamanho deve ser preferência do usuário, não regra global.
  • Em produto real, suporte teclado e leitores de tela para o divisor.
Last updated on
PopoverScroll Area