Étapes

Utilisez Steps pour des guides numérotés clairs, tels que les flux de configuration et de dépannage.

Usage

<Steps>
  <Step title="Install">Add the package.</Step>
  <Step title="Configure">Set your options.</Step>
  <Step title="Run">Start the build.</Step>
</Steps>

Steps de base

npm install @jamdesk/cli

jamdesk init

jamdesk dev

<Steps>
  <Step title="Install the package">

    ```bash
    npm install @jamdesk/cli
    ```

</Step>
  <Step title="Initialize your project">

    ```bash
    jamdesk init
    ```

</Step>
  <Step title="Start the dev server">

    ```bash
    jamdesk dev
    ```

</Step>
</Steps>

Steps sans titres

Les steps fonctionnent également sans titres :

<Steps>
  <Step>

    Clone the repository from GitHub.

</Step>
  <Step>

    Install dependencies with `npm install`.

</Step>
  <Step>

    Run the development server.

</Step>
</Steps>

Contenu enrichi dans les steps

Chaque step peut contenir n'importe quel contenu :

{
  "apiKey": "your-api-key",
  "endpoint": "https://api.example.com"
}

const response = await client.getData();
console.log(response);

Steps avec icônes

Utilisez des icônes à la place des numéros pour une variété visuelle :

<Steps>
  <Step title="Clone the repository" icon="code-branch">

    Clone from GitHub to your local machine.

</Step>
  <Step title="Install dependencies" icon="download">

    Run the package manager install command.

</Step>
  <Step title="Start developing" icon="rocket">

    Launch the development server.

</Step>
</Steps>

Taille des titres

Contrôlez la hiérarchie des titres avec titleSize sur le conteneur Steps :

<Steps titleSize="h3">
  <Step title="First Step">

    This title renders as an h3 element.

</Step>
  <Step title="Second Step">

    Useful for SEO and document structure.

</Step>
</Steps>

Props

Steps

Step

Et ensuite ?