Pasos

Para estilar una lista numerada de tareas para crear guías paso a paso, utiliza el componente <Steps>.

Preview

1. Crea un nuevo proyecto de Starlight:

   npm

   npm create astro@latest -- --template starlight

   pnpm

   pnpm create astro --template starlight

   Yarn

   yarn create astro --template starlight

2. Escribe tu primera página de documentación.

Importación

import { Steps } from '@astrojs/starlight/components';

Uso

Usa el componente <Steps> para estilar listas numeradas de tareas. Esto es útil para guías paso a paso más complejas donde cada paso necesita ser claramente resaltado.

Envuelve <Steps> alrededor de una lista ordenada de Markdown estándar. Toda la sintaxis de Markdown estándar es aplicable dentro de <Steps>.

MDX

import { Steps } from '@astrojs/starlight/components';

<Steps>

1. Importa el componente en tu archivo MDX:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Envuelve `<Steps>` alrededor de tus elementos de lista ordenada.

</Steps>

Markdoc

{% steps %}

1. Importa el componente en tu archivo MDX:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. Envuelve `<Steps>` alrededor de tus elementos de lista ordenada.

{% /steps %}

Preview

1. Importa el componente en tu archivo MDX:

   import { Steps } from '@astrojs/starlight/components';

2. Envuelve <Steps> alrededor de tus elementos de lista ordenada.

Props de <Steps>

Implementación: Steps.astro

El componente <Steps> no acepta ninguna propiedad.