# Panel lateral > Panel que entra desde un borde sobre la página: derecha, izquierda, sin botón de cerrar y abajo en el celular. Categoría: Feedback · Solar v0.8.0 Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html). ## Guía: Cuándo usarlo - Para editar o ver un detalle sin perder la página de fondo. - Abajo, en el celular, para filtros y opciones. - Si es una decisión corta, es un Modal; si es un trámite largo, va en su propia página. ## Derecha · estándar 384 px (max-w-sm), el ancho por defecto. Para el detalle de un ítem, un formulario de pocos campos o acciones sobre lo que se está viendo en la página. La derecha es el lado de «qué hago con esto». ```html

Editar perfil

Cambia tus datos y guarda al terminar.

``` ## Izquierda · compacto 288 px (w-72). Solo para navegar: menús y listas de enlaces. La izquierda es el lado de «dónde estoy», por eso no se usa para el detalle de un ítem ni para formularios. ```html

Menú

``` ## Derecha · sin botón de cerrar Mismo ancho estándar, sin la ×: para cuando hay que elegir una de las opciones antes de seguir. Escape tampoco lo cierra. Úsalo solo si de verdad no hay una salida neutra. ```html

Confirmar envío

Revisa el resumen antes de enviar la solicitud.

Trámite
Certificado
Copias
2
Total
$12.000
``` ## Derecha · lectura 672 px (max-w-2xl). Documentos y texto largo que hay que leer sin salir de la página: un convenio, unas bases, un informe. A este ancho la columna de texto queda en unos 620 px, cerca de 80 caracteres por línea. ```html

Convenio marco de colaboración

Retail Andes · vigente hasta el 31-12-2027

Primero. Objeto. El convenio tiene por objeto establecer un marco de cooperación para el desarrollo de actividades de capacitación, difusión e intercambio de información de interés común.

Segundo. Vigencia. Regirá por veinticuatro meses contados desde su suscripción, y se renovará por períodos iguales salvo aviso escrito de cualquiera de las partes con sesenta días de anticipación.

Tercero. Confidencialidad. Las partes mantendrán reserva de la información que reciban con ocasión de este convenio y que no sea de dominio público, por tres años después de su término.

Cuarto. Propiedad intelectual. Cada parte conserva la titularidad de los derechos sobre el material que aporte. Lo elaborado en conjunto se regirá por lo que acuerden por escrito en cada caso.

Quinto. Coordinación. Cada parte designará una contraparte técnica responsable de coordinar la ejecución e informar del avance a lo menos semestralmente.

Sexto. Término anticipado. Cualquiera de las partes podrá ponerle término con aviso escrito de treinta días, sin expresión de causa y sin derecho a indemnización.

``` ## Abajo, en el celular Ancho completo desde el borde inferior, hasta 85 dvh de alto. Para filtros y opciones en pantallas chicas, donde el pulgar llega abajo y no al costado. En escritorio este caso va a la derecha. ```html

Filtros

Elige uno o más rubros.

Rubro
``` ## Guía: Comportamiento Igual que Modal: se abre con commandfor y command="show-modal", sin script. Los botones van en
y Escape cierra. Mientras está abierto, el foco no sale del panel y la página de fondo no se desplaza; al cerrar, el foco vuelve al botón que lo abrió. El lado lo dan los márgenes del : m-0 ml-auto a la derecha, m-0 mr-auto a la izquierda y m-0 mt-auto abajo. En pantallas de 640 px o menos, el panel derecho ocupa todo el ancho. El lado y el ancho no se eligen por separado ni al gusto: cada combinación tiene su caso, y cada caso tiene su ejemplo acá arriba, con su botón para abrirlo. - Izquierda, compacto (288 px) — navegar. Menús y listas de enlaces. La izquierda es el lado donde la gente espera la navegación: usarla para el detalle de un ítem confunde. Ejemplo: Izquierda · compacto. - Derecha, estándar (384 px) — trabajar sobre lo que se ve. El detalle de un ítem, un formulario corto, filtros. Es el ancho por defecto. Ejemplos: Derecha · estándar y Derecha · sin botón de cerrar. - Derecha, lectura (672 px) — leer. Documentos y texto largo. Ejemplo: Derecha · lectura. - Abajo, ancho completo — el celular. Filtros y opciones en pantallas chicas. En escritorio ese mismo caso va a la derecha. Ejemplo: Abajo, en el celular. La medida de lectura no es decorativa: a 672 px la columna de texto queda en unos 620 px, cerca de 80 caracteres por línea. A 384 px el mismo documento se pica en columnas de cuatro palabras, y a más de 672 px la vista se pierde al volver al inicio de cada línea. No hay ancho completo en escritorio a propósito: si tapas la página de atrás, pierdes el contexto que justifica usar un panel y no una página.