Etapas

Use Steps para criar orientações claras e numeradas, como fluxos de configuração e solução de problemas.

Uso

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

Etapas básicas

Instalar o pacote

npm install @jamdesk/cli

Inicializar seu projeto

jamdesk init

Iniciar o servidor de desenvolvimento

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>

Etapas sem títulos

As etapas também funcionam sem títulos:

Clone o repositório do GitHub.

Instale as dependências com npm install.

Execute o servidor de desenvolvimento.

<Steps>
  <Step>

    Clone the repository from GitHub.

</Step>
  <Step>

    Install dependencies with `npm install`.

</Step>
  <Step>

    Run the development server.

</Step>
</Steps>

Conteúdo avançado nas etapas

Cada etapa pode conter qualquer conteúdo:

Configurar sua API

Crie um arquivo de configuração:

config.json

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

Mantenha sua chave de API em segredo! Nunca a confirme no sistema de controle de versão.

Fazer sua primeira solicitação

Use o SDK para fazer uma solicitação:

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

Etapas com ícones

Use ícones em vez de números para obter variedade visual:

Clonar o repositório

Clone o repositório do GitHub para sua máquina local.

Instalar dependências

Execute o comando de instalação do gerenciador de pacotes.

Começar a desenvolver

Inicie o servidor de desenvolvimento.

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

Tamanho do título

Controle a hierarquia dos títulos com titleSize no contêiner Steps:

Primeira etapa

Este título é renderizado como um elemento h3.

Segunda etapa

Útil para SEO e para a estrutura do documento.

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

Propriedades

Steps

p | h2 | h3default: p

Elemento de título usado para os títulos das etapas.

Step

string

Título opcional da etapa.

string

Nome, URL ou caminho do ícone (substitui o número da etapa).

Estilo do ícone do Font Awesome.

p | h2 | h3

Substitui o titleSize do Steps pai. Herda o valor do pai se não for definido.

number

Define manualmente o número da etapa (atribuído automaticamente se omitido).

O que vem a seguir?

Visão geral dos componentes

Consulte todos os componentes disponíveis

Noções básicas de MDX

Saiba como usar componentes em MDX