FloatingPanel
Painel flutuante sem modal. A página atrás continua usável, por isso não há fundo escurecido nem foco preso no desktop. Pode ser redimensionado pela borda, com mouse ou setas, e maximizado. No celular vira folha inferior com fundo.
Detalhes do envelope
Seções recolhíveis com pares de rótulo e valor. O corpo sem recuo deixa as divisórias de ponta a ponta.
À esquerda e com conteúdo livre
Com bodyPadded, o corpo já tem recuo.
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| open / onOpenChange | boolean / (open) => void | — | Estado controlado. |
| side | "right" | "left" | "right" | Lado de ancoragem a partir de 768px. |
| size | "sm" | "md" | "lg" | "xl" | number | "md" | 320, 400, 560, 720px ou largura em px. |
| title / description / icon | ReactNode | — | Cabeçalho. O título nomeia o diálogo. |
| titleSlot | ReactNode | — | Substitui título e descrição. |
| headerActions | ReactNode | — | Ações antes de maximizar e fechar. |
| footer | ReactNode | — | Rodapé fixo. |
| resizable / minWidth / maxWidth | boolean / number / number | false / 320 / 800 | Borda arrastável, também por setas, Home e End. |
| storageKey | string | — | Guarda a largura no localStorage. |
| maximizable / defaultMaximized | boolean | false | Botão para ocupar a tela. |
| closeOnEscape | boolean | true | Fecha com Esc. |
| bodyPadded | boolean | true | Recuo do corpo. Desligue ao usar FloatingPanelSection. |
| FloatingPanelSection | title, collapsible?, defaultOpen? | — | Seção com cabeçalho, recolhível por padrão. |
| FloatingPanelField | label, value? | — | Linha de rótulo e valor. Sem valor, mostra um travessão. |