Panel
Muestra contenido personalizado en la barra lateral derecha en lugar de la Tabla de contenidos. Permanece visible mientras los usuarios hacen scroll.
Panel te permite mostrar contenido personalizado en la barra lateral derecha en lugar de la Tabla de contenidos predeterminada. El contenido permanece visible mientras los lectores hacen scroll por tu página, lo que lo hace ideal para información que siempre debe estar accesible—como referencias rápidas, advertencias importantes o enlaces de soporte.
Usa Panel cuando:
- Información crítica no deba desaparecer al hacer scroll
- Material de referencia rápida complemente el contenido principal
- Llamadas a la acción persistentes deban permanecer visibles (enlaces de soporte, claves de API)
¡Esta nota se muestra en el panel de la barra lateral!
Haz scroll hacia abajo para ver que el panel permanece visible.
Uso básico
Envuelve cualquier contenido en un Panel para que aparezca en la barra lateral derecha:
<Panel>
<Info>This content appears in the sidebar!</Info>
</Panel>
Casos de uso comunes
Los Paneles funcionan bien para advertencias fijadas, tarjetas de referencia rápida y enlaces de soporte:
<Panel>
<Warning>
API rate limits: 100 requests/minute
</Warning>
<Card title="Quick Reference" icon="list">
**Methods:** GET, POST, PUT, DELETE
**Auth:** Bearer token required
</Card>
<Card title="Need Help?" icon="circle-question" href="https://example.com/support">
Contact our support team
</Card>
</Panel>
Cuándo NO usar Panel
- Páginas cortas - La Tabla de contenidos ayuda a los usuarios a navegar; solo reemplázala cuando tengas contenido más valioso
- Documentación estándar - La mayoría de las páginas funcionan mejor con el ToC predeterminado
- Usuarios móviles - El contenido del Panel está oculto en pantallas más pequeñas, así que asegúrate de que la información crítica también esté en el contenido principal
Comportamiento
- Aparece en la barra lateral derecha en escritorio (1280px+), oculto en pantallas más pequeñas
- Un Panel por página; reemplaza la Tabla de contenidos por completo
- Compatible con cualquier componente: Callouts, Cards, CodeGroup, Accordions, etc.
