Schritte

Verwenden Sie Steps für nummerierte Anleitungen wie 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

Das Paket installieren

npm install @jamdesk/cli

Ihr Projekt initialisieren

jamdesk init

Den Dev-Server 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

Schritte funktionieren auch ohne Titel:

Das Repository von GitHub klonen.

Abhängigkeiten mit npm install installieren.

Den Entwicklungsserver starten.

<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 Schritt kann beliebige Inhalte enthalten:

Ihre API konfigurieren

Erstellen Sie eine Konfigurationsdatei:

config.json

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

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

Die erste Anfrage stellen

Verwenden Sie das SDK, um eine Anfrage zu stellen:

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

Steps mit Symbolen

Ersetzen Sie die Nummern durch Icons:

Das Repository klonen

Von GitHub auf Ihren lokalen Rechner klonen.

Abhängigkeiten installieren

Führen Sie den Installationsbefehl des Paketmanagers aus.

Mit der Entwicklung beginnen

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 Schritt

Dieser Titel wird als h3-Element dargestellt.

Zweiter Schritt

Nützlich für SEO und 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 Schritttitel.

Step

string

Optionaler Schritttitel.

string

Icon-Name, URL oder Pfad (ersetzt die Schrittnummer).

Font-Awesome-Icon-Stil.

p | h2 | h3

Überschreibt das titleSize des übergeordneten Steps. Wird vom übergeordneten Element übernommen, wenn nicht gesetzt.

number

Schrittnummer manuell festlegen (wird automatisch vergeben, wenn weggelassen).

Wie geht es weiter?

Übersicht der Komponenten

Alle verfügbaren Komponenten durchsuchen

MDX-Grundlagen

Erfahren Sie, wie Sie Komponenten in MDX verwenden