Files
mintlify__docs/es/components/banner.mdx
2026-01-29 18:09:21 -08:00

103 lines
3.3 KiB
Plaintext

---
title: "Banner"
description: "Añade un banner para mostrar anuncios y notificaciones importantes en todo el sitio."
keywords: ["banner", "anuncios", "en todo el sitio"]
---
Usa banners para mostrar anuncios, actualizaciones o notificaciones importantes en todo tu sitio de documentación. Los banners aparecen en la parte superior de cada página, admiten formato Markdown y pueden hacerse descartables. Los banners usan el color definido por la propiedad `colors.dark` en tu `docs.json`.
Para añadir un banner, usa la propiedad `banner` en tu `docs.json`:
<CodeGroup>
```json Product announcements wrap
"banner": {
"content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/changelog) para más detalles.",
"dismissible": true
}
```
```json Maintenance notices wrap
"banner": {
"content": "⚠️ Mantenimiento programado: la API no estará disponible el 15 de diciembre, de 2 a 4 a. m. UTC",
"dismissible": false
}
```
```json Required actions wrap
"banner": {
"content": "**Acción requerida:** migra a nuestra nueva versión antes del 1 de enero. [Guía de migración](/migration)",
"dismissible": true
}
```
</CodeGroup>
<Note>
También puedes configurar banners por idioma configurando `banner` en `navigation.languages`. Consulta [Banners específicos por idioma](#language-specific-banners).
</Note>
<div id="properties">
## Propiedades
</div>
<ResponseField name="content" type="string" required>
El mensaje del banner. Admite texto sin formato y Markdown.
</ResponseField>
<ResponseField name="dismissible" type="boolean">
Indica si los usuarios pueden descartar el banner. Cuando es `true`, los usuarios pueden cerrarlo y no volverá a aparecer durante su sesión. De manera predeterminada, es `false`.
</ResponseField>
<div id="language-specific-banners">
## Banners específicos por idioma
</div>
Configura distintos banners para cada idioma en tu documentación. Define los banners específicos por idioma en el array `navigation.languages` de tu `docs.json`.
```json
{
"navigation": {
"languages": [
{
"language": "en",
"banner": {
"content": "🚀 Version 2.0 is now live! See our [changelog](/en/changelog) for details.",
"dismissible": true
},
"groups": [
{
"group": "Getting started",
"pages": ["en/overview", "en/quickstart"]
}
]
},
{
"language": "es",
"banner": {
"content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/es/changelog) para más detalles.",
"dismissible": true
},
"groups": [
{
"group": "Getting started",
"pages": ["es/overview", "es/quickstart"]
}
]
}
]
},
"banner": {
"content": "🚀 ¡La versión 2.0 ya está disponible!",
"dismissible": true
}
}
```
<div id="fallback-behavior">
### Comportamiento de respaldo
</div>
Los banners siguen un orden de prioridad al decidir qué contenido mostrar:
1. **Banner específico por idioma**: Si el idioma actual tiene una configuración de `banner`, esta tendrá prioridad.
2. **Banner global**: Si no existe un banner específico por idioma, se muestra el `banner` global.