Saltar al contenido
Fieldbook
Menú
Iniciar sesión
ES

Capas superpuestas

Bottom sheet panel

Bottom sheet panel: Una hoja de estilo móvil que se eleva desde el borde inferior con un asa y se puede arrastrar hacia abajo para descartarla.

Cómo usar Bottom sheet panel

Bottom sheet panel se presenta con el formato de vista previa «tarjeta» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

ControlTipoValor inicialLímites de la vista previa
titletextMove goalHasta 50 caracteres
accentcolor#9BE15DLos metadatos no indican otro límite.
dragToDismissbooleantrueLos metadatos no indican otro límite.
¿Para qué frameworks está disponible Bottom sheet panel?

Bottom sheet panel está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Bottom sheet panel?

Los metadatos de React indican estas dependencias npm además de React: motion, radix-ui, clsx, tailwind-merge.

¿Qué detalles de accesibilidad se observan en Bottom sheet panel?

El código React de Bottom sheet panel incluye: elementos nativos (button); atributos y manejadores (aria-hidden, aria-label). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Bottom sheet panel el movimiento reducido?

Bottom sheet panel consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: duration: reduced ? 0 : 0.22; spring: reduced ? { duration: 0 } : { type: "spring" as const, stiffness: 340, damping: 34, mass: 0.9 }. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Sheet drawer de Fieldbook, de la categoría Capas superpuestas.
1540Sheet drawerCapas superpuestasUn panel deslizable que surge desde un borde sobre un fondo atenuado, mantiene el foco en el interior y se cierra con Escape, el botón de cerrar o al tirar de su encabezado.
Imagen fija del componente Drag Dismiss Bottom Drawer de Fieldbook, de la categoría Capas superpuestas.
2340Drag Dismiss Bottom DrawerCapas superpuestasUn panel que se desliza hacia adentro desde un borde con una pequeña manija de arrastre, rastrea el arrastre de un dedo o puntero con resistencia de banda elástica y se abre nuevamente o se cierra dependiendo de qué tan lejos se tira.
Imagen fija del componente Edge-slide panel de Fieldbook, de la categoría Capas superpuestas.
2146Edge-slide panelCapas superpuestasUn panel de configuración que aparece al ras del borde de la pantalla mientras la página detrás de él se oscurece y se vuelve borrosa.
Imagen fija del componente Account Menu Flyout de Fieldbook, de la categoría Capas superpuestas.
2296Account Menu FlyoutCapas superpuestasUn botón de resumen de perfil que se abre en un menú de cuenta de filas etiquetadas, con una pequeña línea indicadora curva que se endereza cuando el menú está abierto.
Imagen fija del componente Anchored popover card de Fieldbook, de la categoría Capas superpuestas.
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.
Imagen fija del componente App folder expand de Fieldbook, de la categoría Capas superpuestas.
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.