Componentes

Avisos

Cada tipo de aviso utiliza la sintaxis de valla ::: con su título predeterminado.

Títulos personalizados

Contenido enriquecido dentro de avisos

Aquí hay un bloque de código dentro de un aviso:

npm install @astrojs/starlight

Una lista de elementos:

Primer elemento con texto en negrita
Segundo elemento con código en línea
Tercer elemento con un enlace a la documentación de Starlight

CSS de avisos

Los componentes de aviso integrados de Starlight obtienen esquinas redondeadas y una sombra en capas:

.starlight-aside {
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.12);
}

Pestañas

Este es el contenido de la pestaña de resumen. Contiene texto simple para verificar la representación básica de pestañas.

Pestañas con contenido mixto

Contenido de párrafo simple en la primera pestaña.

const greeting = "Hello from a code block inside a tab!";
console.log(greeting);

Elemento uno dentro de una pestaña
Elemento dos con texto en negrita
Elemento tres con código en línea

Pestañas sincronizadas

Estos dos grupos de pestañas comparten syncKey="pkg". Seleccionar una pestaña en un grupo debe actualizar el otro.

Comando de instalación:

npm install @f5-sales-demo/docs-theme

pnpm add @f5-sales-demo/docs-theme

yarn add @f5-sales-demo/docs-theme

Comando de ejecución:

npm run dev

pnpm dev

yarn dev

Pasos

Clonar el repositorio

git clone https://github.com/example/repo.git
cd repo

Instalar dependencias
Ventana de terminal
```
npm install
```
Iniciar el servidor de desarrollo
Ventana de terminal
```
npm run dev
```
El sitio estará disponible en http://localhost:4321.

Tarjetas

Tarjeta individual

Single Card

Esta es una tarjeta independiente con un ícono. Las tarjetas son útiles para destacar información o características clave.

Cuadrícula de tarjetas

Performance

Astro entrega cero JS por defecto para cargas de página rápidas.

Customizable

Starlight proporciona amplias opciones de temas y complementos.

Accessible

Las características de accesibilidad integradas aseguran que el contenido llegue a todos.

Documented

La documentación completa facilita el inicio del proyecto.

Diseño escalonado

Step One

Configure los ajustes del proyecto y las variables de entorno.

Step Two

Cree sus páginas de contenido en formato MDX.

Step Three

Previsualice localmente con el servidor de desarrollo.

Step Four

Implemente en la plataforma de alojamiento de su elección.

Tarjetas de enlace

El tema proporciona un componente LinkCard que funciona con o sin íconos. Impórtelo desde el tema:

import LinkCard from '@f5-sales-demo/docs-theme/components/LinkCard.astro';

Starlight DocumentationLearn how to build documentation sites with Starlight.

Astro DocumentationExplore the Astro framework for content-driven websites.

Con íconos

Agregue una propiedad icon usando la sintaxis prefijo:nombre. Los ocho paquetes de íconos son compatibles — consulte la documentación de Paquetes de iconos para el catálogo completo.

Lucide (`lucide:`)

Web App FirewallFirewall policies and configuration.

Multi-Cloud NetworkingSite connectivity across clouds.

Carbon (`carbon:`)

Security ServicesIBM Carbon security icon set.

Cloud ServicesIBM Carbon cloud icon set.

Material Design Icons (`mdi:`)

Access ControlMaterial Design shield lock icon.

Data ManagementMaterial Design database icon.

Phosphor (`phosphor:`)

Threat DefensePhosphor shield icon.

Global NetworkPhosphor globe icon.

Tabler (`tabler:`)

Cloud PlatformTabler cloud icon.

DeploymentTabler rocket icon.

F5 Brand (`f5-brand:`)

Cloud SecurityF5 branded cloud shield icon.

FirewallF5 branded firewall icon.

F5 Distributed Cloud (`f5xc:`)

Estos íconos son multicolor y utilizan propiedades personalizadas de CSS para la adaptación de color en modo claro/oscuro.

App & API ProtectionF5 XC web app and API protection icon.

Bot DefenseF5 XC bot defense icon.

HashiCorp Flight (`hashicorp-flight:`)

TerraformHashiCorp Terraform icon.

ConsulHashiCorp Consul icon.

Insignias

Variantes de insignias en línea

Las seis variantes de insignias representadas en línea:

Default Note Danger Success Tip Caution

Tamaños de insignias

Small Medium Large

Cada tamaño con una variante:

Small Tip Medium Danger Large Success

Insignias en encabezados

Los siguientes encabezados utilizan la sintaxis del complemento starlight-heading-badges.

Función completa Stable

Este encabezado tiene una insignia de éxito que indica que la función es estable.

API experimental Beta

Este encabezado tiene una insignia de precaución que indica que la API es experimental.

Sistema heredado Deprecated

Este encabezado tiene una insignia de peligro que indica obsolescencia.

Nueva función New

Este encabezado tiene una insignia de consejo que indica una nueva función.

Documentación Updated

Este encabezado tiene una insignia de nota que indica actualizaciones recientes.

Insignia predeterminada Info

Este encabezado tiene una insignia predeterminada sin variante especificada.

Insignia en la barra lateral

Revise la barra lateral: esta página tiene una insignia “New” con la variante tip aplicada mediante el frontmatter.

Tablas

Tabla simple

Función	Estado	Prioridad
Modo oscuro	Compatible	Alta
Zoom de imagen	Compatible	Media
Diagramas Mermaid	Compatible	Media
Insignias en encabezados	Compatible	Baja

Tabla con alineación y código

Propiedad	Tipo	Predeterminado	Descripción
`title`	`string`	—	Título de página mostrado en el encabezado
`description`	`string`	`""`	Meta descripción para SEO
`sidebar.order`	`number`	`0`	Orden de clasificación en la barra lateral
`sidebar.badge`	`object`	`null`	Insignia mostrada junto a la etiqueta de la barra lateral
`template`	`"doc" \| "splash"`	`"doc"`	Plantilla de diseño de página

Imágenes

La imagen a continuación prueba el complemento starlight-image-zoom. Haga clic para ampliar.

GitHub Avatar

Árbol de archivos

Directoriosrc/
- Directoriocontent/
  - Directoriodocs/
    index.mdx
    01-environment-variables.mdx
    02-build-pipeline.mdx
    03-astro-config.mdx
    04-logo.mdx
    05-colors.mdx
    07-typography.mdx
    08-code-blocks.mdx
    09-components.mdx Esta página
    10-mermaid.mdx
    11-footer.mdx
    12-style-enhancement-guide.mdx
- Directorioplugins/
  - remark-mermaid.mjs
Directoriostyles/
- custom.css
astro.config.mjs
package.json

Verificaciones del tema

El color del borde izquierdo difiere por variante de aviso (azul, morado, amarillo, rojo)
El tinte de fondo del aviso es visible en los modos claro y oscuro
La sombra del cuadro es sutil pero visible alrededor de cada aviso
Esquinas redondeadas (0.75rem) en todos los avisos
El color del indicador activo de la pestaña utiliza el color de acento
La línea del conector de pasos es visible entre los pasos numerados
Las pestañas sincronizadas permanecen sincronizadas al cambiar entre grupos
Los bloques de código dentro de las pestañas se representan con el resaltado de sintaxis correcto
El color del borde de la tarjeta se adapta entre los modos claro y oscuro
El efecto de fondo al pasar el cursor es visible en las tarjetas
El color del ícono de flecha de LinkCard coincide con el color de acento
El diseño escalonado desplaza verticalmente las tarjetas alternas
Los íconos se renderizan correctamente dentro de los encabezados de tarjetas
Los colores de fondo de las insignias por variante difieren entre los modos oscuro y claro
Las insignias en modo oscuro usan tonos profundos (red-4, jade-4, tangerine-4, eggplant-4, bay-4)
Las insignias en modo claro usan tonos claros (red-1, jade-1, tangerine-1, eggplant-1, bay-1)
Las insignias de encabezado se alinean en línea con el texto del encabezado
La insignia de la barra lateral se muestra junto a la etiqueta de la página
Los colores de borde de la tabla se adaptan entre los modos claro y oscuro
La fila del encabezado de la tabla tiene un fondo diferenciado
El zoom de imagen funciona al hacer clic (starlight-image-zoom)
El fondo del árbol de archivos utiliza colores apropiados para el tema
Los íconos heredan el color de texto actual