Drawer
Panel lateral
Un panel lateral se desliza desde un borde de la pantalla. Parte de la página detrás suyo sigue visible.
Un ejemplo real
Seleccione un pedido para abrir sus detalles desde la derecha. La lista de pedidos permanece visible detrás de ellos.
Partes principales
- 01Activador
- 02Anchored or modal surface
- 03Focus boundary
- 04Dismiss path
Úsalo cuando
Úsalo para detalles o una segunda tarea más pequeña cuando mantener el lugar actual ayuda.
No lo uses cuando
Nunca comprimas un flujo de trabajo largo con muchos pasos en un cajón estrecho.
Nombre usado en código
Dialog + edge positioning Antes de lanzarlo
Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states.
Outcome: Complete the task with Panel lateral (Drawer). User context: Seleccione un pedido para abrir sus detalles desde la derecha. La lista de pedidos permanece visible detrás de ellos. Recommended pattern: Panel lateral (Drawer). Why it fits: Úsalo para detalles o una segunda tarea más pequeña cuando mantener el lugar actual ayuda. Do not use it when: Nunca comprimas un flujo de trabajo largo con muchos pasos en un cajón estrecho. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Ningún estándar oficial único controla todo el término. Su significado puede cambiar según equipos, plataformas o marcos. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Panel lateral (Drawer) is used now. Definition: Un panel lateral se desliza desde un borde de la pantalla. Parte de la página detrás suyo sigue visible. Release checks: Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.