an-modal

Un UIViewController presentado en iOS y un Dialog en Android — no una vista puesta encima de las demás. Se parece, y la diferencia importa: el sistema sabe que hay algo modal delante, así que VoiceOver y TalkBack dejan de leer lo que hay detrás, el botón de volver de Android lo cierra, y no compite por el orden de dibujo con los diálogos del propio sistema.

(dismiss) se dispara cuando lo cierra el usuario —la hoja arrastrada hacia abajo, el botón de volver— a diferencia de que [visible] pase a falso porque lo haya dicho tu código.

Disponibilidad

iOS · iPadOS	Android	macOS	tvOS	visionOS	watchOS	Wear OS
✓	✓	✓	✓	✓	✓	✓

En qué se convierte

iOS · iPadOS	Android	macOS	watchOS
a presented UIViewController	Dialog	a presented sheet	.sheet

Props

Prop	Tipo	Por defecto
visible	boolean | null	false
presentation	'fullScreen' | 'sheet' | null	null	fullScreen covers the screen; sheet comes up from the bottom with the system’s grabber, resting where [ios].detents says.

Eventos

Evento	Carga
(dismiss)	—	It closed.

[ios] — lo que tiene UIKit y los demás no

Clave	Tipo
detents	readonly ('medium' | 'large' | number)[]	Where the sheet is allowed to rest, in the order UIKit is given them. UISheetPresentationController.detents. 'medium' and 'large' are UIKit’s own; a number is .custom(resolver:), a height in points measured from the bottom. Without it, the two the system suggests. Only read when presentation is sheet. Android has no equivalent to ask for: its Dialog is as tall as its content, and BottomSheetBehavior is Material’s, not the platform’s.

Ejemplo

<an-modal
  [visible]="editing()"
  [presentation]="'sheet'"
  [ios]="{ detents: ['medium', 'large'] }"
  (dismiss)="editing.set(false)">
  <an-safe-area [edges]="['top', 'bottom']" [padding]="20" [style.gap]="'12'">
    <an-text [fontSize]="20">Edit note</an-text>
    <an-textarea [value]="draft()" (change)="draft.set($event.value)" />
  </an-safe-area>
</an-modal>

Todas las primitivas llevan además las props de la base —fondo, borde, opacidad, las transformaciones, animate, el contrato de accesibilidad— y todos los gestos. La base completa está en Componentes, y las cargas en Eventos.