Skip to main content
Usa el componente Variation para mostrar u ocultar contenido según la variación que el lector seleccione en el menú desplegable de variaciones. Las variaciones son útiles cuando la misma página debe describir una audiencia, región, nivel de plan o entorno de despliegue distintos sin duplicar la página.
Las variaciones están disponibles en el tema Willow. En otros temas, se ignoran la configuración y el selector.

​
Configurar variaciones

Añade un objeto variations en tu docs.json con las opciones entre las que quieres que los lectores puedan cambiar. La primera opción es la predeterminada.
docs.json
​
array
requerido
Opciones de variación en el orden en que se muestran. La primera opción es la predeterminada. Cada opción requiere:
  • id: Un identificador único y estable que se usa en el componente Variation y en la URL.
  • label: El nombre visible en el menú desplegable de variaciones.
Cuando variations está configurado, aparece un menú desplegable de Variación encima del selector de vistas existente en la barra lateral del índice, en los paneles laterales, en los filtros del changelog y en línea en móviles.

​
Usar el componente

Envuelve el contenido condicional en un componente Variation y establece is con el id de la opción que debe revelarlo. El contenido fuera de un bloque Variation se muestra siempre.
Para compartir contenido entre varias variaciones, pasa un array a is:

​
Cómo cambian de variación los lectores

  • Los lectores eligen una variación en el menú desplegable de la barra lateral del índice.
  • La selección se guarda en el almacenamiento local por proyecto, por lo que los lectores mantienen su variación al navegar entre páginas.
  • La variación actual se refleja en la URL como ?variation=<id>, lo que facilita compartir un enlace a una variación concreta.

​
Comportamiento del índice

Los encabezados dentro de un bloque Variation se filtran automáticamente del índice cuando hay otra variación activa. Los encabezados fuera de cualquier bloque Variation siempre aparecen. Los bloques Variation anidados se intersectan: un bloque interno solo se muestra cuando su valor de is es compatible con todos los bloques que lo contienen.

​
Propiedades

​
string o string[]
requerido
El id de variación (o el array de ids) que debe revelar el contenido envuelto. Los ids deben coincidir con una opción definida en variations.options en docs.json.