Dialog
Una ventana superpuesta sobre la ventana principal u otra ventana de diálogo.
Uso
Características
- Navegación por teclado, con Escape para cerrar
- Clic fuera para cerrar (configurable)
- Trampa de foco para accesibilidad
- Animaciones y transiciones suaves
- Atributos ARIA para lectores de pantalla
Referencia de la API
VoltDialogContent — [voltDialogContent]
| Entrada | Tipo | Por defecto |
|---|---|---|
| class | string | '' |
| role | unknown | — |
| modal | unknown | — |
VoltDialogDescription — [voltDialogDescription]
| Entrada | Tipo | Por defecto |
|---|---|---|
| class | string | '' |
VoltDialogOverlay — [voltDialogOverlay]
| Entrada | Tipo | Por defecto |
|---|---|---|
| class | string | '' |
| closeOnClick | unknown | — |
VoltDialogRoot — ng-template[voltDialogRoot]
| Entrada | Tipo | Por defecto |
|---|---|---|
| open | boolean | false |
| role | VoltDialogRole | 'dialog' |
| closeOnEscape | boolean | true |
| closeOnClick | boolean | true |
| initialFocus | string | undefined | undefined |
| dismissible | boolean | true |
| Salida | Tipo |
|---|---|
| openChange | boolean |
| closed | R | undefined |
VoltDialogTitle — [voltDialogTitle]
| Entrada | Tipo | Por defecto |
|---|---|---|
| class | string | '' |
VoltDialog — [voltDialog]
| Entrada | Tipo | Por defecto |
|---|---|---|
| voltDialog | unknown | — |
| closeOnEscape | unknown | — |
| Salida | Tipo |
|---|---|
| closed | unknown |
Código del componente
Instalar por CLI:
npx @voltui/cli add dialogTypeScript
Cargando el editor…
Copia este código en tu proyecto. El componente usa ng-primitives/dialog.