Capas superpuestas

Pop scale panel

Un popover que se abre desde la mitad del tamaño, apunta una pequeña flecha hacia su gatillo, atenúa la página detrás de él y se cierra con Escape o un clic externo.

Workspace

Design review

Cover artOnboardingPricing pageEmpty states

Click the trigger again, press Escape, or click outside to close it.

Cómo usar Pop scale panel

Un popover que se abre desde la mitad del tamaño, apunta una pequeña flecha hacia su gatillo, atenúa la página detrás de él y se cierra con Escape o un clic externo.

Prueba la vista previa con el cursor y el teclado. Comprueba el foco visible y la composición en pantallas estrechas dentro de tu página. Usa el número de ficha o el identificador cuando pidas el componente a tu agente.

Propiedades: side, align, showArrow, dimBackdrop, accent

¿Qué frameworks están disponibles?

El catálogo incluye estas versiones: react, vue, svelte, astro, html. La vista previa de esta página utiliza React.

¿Cómo accedo a la implementación?

La vista previa y la descripción son públicas. Inicia sesión con una cuenta autorizada para abrir el código, las versiones y el panel de instalación.

Conecta tu agente

Relacionados

1913Anchored settings popoverCapas superpuestasUn botón que abre un pequeño panel de configuración anclado a su lado, que crece desde la esquina más cercana a su gatillo y voltea los lados cuando se acaba el espacio.

1911Anchored info popoverCapas superpuestasUn botón disparador que abre un pequeño panel de información flotante anclado a uno de sus bordes, desvaneciéndose y escalando desde ese borde y descartándose con un clic externo o Escape.

1912Anchored popover cardCapas superpuestasUn botón disparador que abre una pequeña tarjeta de configuración anclada a sí misma, que se amplía desde el borde del que crece y se cierra con un segundo clic, Escape o una pulsación exterior.

2300App folder expandCapas superpuestasUn mosaico de carpetas estilo pantalla de inicio cuyos pequeños íconos de aplicaciones crecen hasta convertirse en un panel completo, cada ícono viaja desde su miniatura hasta su lugar grande.

2324Confirm action modalCapas superpuestasUn cuadro de diálogo de confirmación centrado que se abre sobre un fondo que se oscurece y le pide al visitante que confirme o cancele una acción destructiva.

2335Dismissible DialogCapas superpuestasUn cuadro de diálogo centrado en un propósito general que se abre sobre un fondo borroso y que puede cerrarse casualmente con el botón de cerrar, el fondo o Escape.