Overlay
Sheet
Painel lateral deslizante para conteúdo secundário.
Uso
Use o elemento <y-sheet> no seu HTML:
html
<y-button onclick="this.nextElementSibling.open = true">Abrir Sheet</y-button><y-sheet title="Filtros" side="right"> <p>Conteúdo do sheet</p></y-sheet>Exemplos
Padrão
Padrão
Propriedades
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
open | boolean | false | Controla visibilidade |
side | "left" | "right" | "right" | Lado de abertura |
title | string | — | Título do sheet |
Importação
Importe todos os componentes ou apenas este:
typescript
// Importar tudoimport '@yampi/ui';// Importar apenas este componenteimport '@yampi/ui/dist/components/sheet.js';Acessibilidade
- Suporta navegação por teclado
- Utiliza atributos ARIA apropriados
focus-visiblepara indicação de foco