Dialog
Вікно, накладене поверх головного вікна або іншого діалогу.
Використання
Можливості
- Навігація з клавіатури, Escape закриває
- Клік поза межами закриває (налаштовується)
- Пастка фокуса для доступності
- Плавні анімації та переходи
- Атрибути ARIA для зчитувачів екрана
Довідник API
VoltDialogContent — [voltDialogContent]
| Вхід | Тип | За замовчуванням |
|---|---|---|
| class | string | '' |
| role | unknown | — |
| modal | unknown | — |
VoltDialogDescription — [voltDialogDescription]
| Вхід | Тип | За замовчуванням |
|---|---|---|
| class | string | '' |
VoltDialogOverlay — [voltDialogOverlay]
| Вхід | Тип | За замовчуванням |
|---|---|---|
| class | string | '' |
| closeOnClick | unknown | — |
VoltDialogRoot — ng-template[voltDialogRoot]
| Вхід | Тип | За замовчуванням |
|---|---|---|
| open | boolean | false |
| role | VoltDialogRole | 'dialog' |
| closeOnEscape | boolean | true |
| closeOnClick | boolean | true |
| initialFocus | string | undefined | undefined |
| dismissible | boolean | true |
| Вихід | Тип |
|---|---|
| openChange | boolean |
| closed | R | undefined |
VoltDialogTitle — [voltDialogTitle]
| Вхід | Тип | За замовчуванням |
|---|---|---|
| class | string | '' |
VoltDialog — [voltDialog]
| Вхід | Тип | За замовчуванням |
|---|---|---|
| voltDialog | unknown | — |
| closeOnEscape | unknown | — |
| Вихід | Тип |
|---|---|
| closed | unknown |
Код компонента
Встановити через CLI:
npx @voltui/cli add dialogTypeScript
Завантаження редактора…
Скопіюйте цей код у свій проєкт. Компонент використовує ng-primitives/dialog.