Steps

Verwenden Sie Steps für klare, nummerierte Anleitungen, etwa für Einrichtungs- und Fehlerbehebungsabläufe.

Verwendung

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

Grundlegende Steps

Paket installieren

npm install @jamdesk/cli

Projekt initialisieren

jamdesk init

Entwicklungsserver starten

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 ohne Titel

Steps funktionieren auch ohne Titel:

Klonen Sie das Repository von GitHub.

Installieren Sie die Abhängigkeiten mit npm install.

Starten Sie den Entwicklungsserver.

<Steps>
  <Step>

    Clone the repository from GitHub.

</Step>
  <Step>

    Install dependencies with `npm install`.

</Step>
  <Step>

    Run the development server.

</Step>
</Steps>

Umfangreiche Inhalte in Steps

Jeder Step kann beliebige Inhalte enthalten:

API konfigurieren

Erstellen Sie eine Konfigurationsdatei:

config.json

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

Bewahren Sie Ihren API-Schlüssel geheim auf! Committen Sie ihn niemals in die Versionsverwaltung.

Ihre erste Anfrage senden

Verwenden Sie das SDK, um eine Anfrage zu senden:

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

Steps mit Symbolen

Verwenden Sie anstelle von Zahlen Symbole für eine visuelle Abwechslung:

Repository klonen

Klonen Sie das Repository von GitHub auf Ihren lokalen Rechner.

Abhängigkeiten installieren

Führen Sie den Installationsbefehl des Paketmanagers aus.

Entwicklung starten

Starten Sie den Entwicklungsserver.

<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>

Titelgröße

Steuern Sie die Überschriftenhierarchie mit titleSize am Steps-Container:

Erster Step

Dieser Titel wird als h3-Element gerendert.

Zweiter Step

Nützlich für SEO und die Dokumentstruktur.

<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

p | h2 | h3default: p

Überschriftenelement für Step-Titel.

Step

string

Optionaler Step-Titel.

string

Symbolname, URL oder Pfad (ersetzt die Step-Nummer).

Symbolstil von Font Awesome.

p | h2 | h3

Überschreibt die titleSize des übergeordneten Steps-Containers. Wird vom übergeordneten Container übernommen, wenn nicht festgelegt.

number

Step-Nummer manuell festlegen (wird automatisch zugewiesen, wenn sie nicht angegeben ist).

Wie geht es weiter?

Übersicht der Komponenten

Alle verfügbaren Komponenten durchsuchen

MDX-Grundlagen

Erfahren Sie, wie Sie Komponenten in MDX verwenden