mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
b6a700ba68
* docs: document card icon CSS selectors and fixed example panel width * docs: mirror card icon CSS and example width updates into es, fr, zh --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
78 lines
2.8 KiB
Plaintext
78 lines
2.8 KiB
Plaintext
---
|
|
title: "Ejemplos"
|
|
description: "Muestra ejemplos de código en el panel derecho de la barra lateral en escritorio para mostrar muestras de solicitud y respuesta junto a la API."
|
|
keywords: ["RequestExample", "ResponseExample", "code examples", "request-response"]
|
|
boost: 3
|
|
---
|
|
|
|
Los componentes `<RequestExample>` y `<ResponseExample>` muestran bloques de código en la barra lateral derecha para crear un diseño de dos columnas que mantiene los ejemplos visibles mientras los usuarios se desplazan por tu contenido. Usa estos componentes para la documentación de API, pero funcionan en todas las páginas.
|
|
|
|
Casos de uso comunes:
|
|
|
|
* Documentación de endpoints de API con ejemplos de solicitud y respuesta
|
|
* Ejemplos de configuración junto con texto explicativo
|
|
* Fragmentos de código que los usuarios consultan mientras siguen instrucciones
|
|
* Ejemplos de antes y después en tutoriales
|
|
|
|
En dispositivos móviles, los componentes `<RequestExample>` y `<ResponseExample>` se muestran como bloques de código en estilo regular que los usuarios pueden omitir al desplazarse.
|
|
|
|
El panel de la barra lateral tiene un ancho fijo que no puedes configurar. Si quieres que un ejemplo de código ocupe todo el ancho del contenido, usa un bloque de código normal o un [CodeGroup](/es/components/code-groups) en el contenido principal en lugar de envolverlo en `<RequestExample>` o `<ResponseExample>`.
|
|
|
|
<RequestExample>
|
|
```bash Request
|
|
curl --request POST \
|
|
--url https://dog-api.kinduff.com/api/facts
|
|
```
|
|
</RequestExample>
|
|
|
|
<ResponseExample>
|
|
```json Response
|
|
{ "status": "success" }
|
|
```
|
|
</ResponseExample>
|
|
|
|
<div id="requestexample">
|
|
## RequestExample
|
|
</div>
|
|
|
|
Usa `<RequestExample>` para fijar ejemplos de código en la barra lateral derecha. Este componente funciona de forma similar al componente [CodeGroup](/es/components/code-groups), pero muestra el código en la barra lateral en lugar de en línea.
|
|
|
|
Puedes incluir varios bloques de código dentro de un solo `<RequestExample>`. Cada bloque de código debe tener un atributo title.
|
|
|
|
````mdx RequestExample
|
|
<RequestExample>
|
|
|
|
```bash Solicitud
|
|
curl --request POST \
|
|
--url https://dog-api.kinduff.com/api/facts
|
|
```
|
|
|
|
</RequestExample>
|
|
````
|
|
|
|
<div id="responseexample">
|
|
## ResponseExample
|
|
</div>
|
|
|
|
El componente `<ResponseExample>` ancla ejemplos de código en la barra lateral derecha, debajo de cualquier contenido `<RequestExample>` en la misma página.
|
|
|
|
````mdx ResponseExample
|
|
<ResponseExample>
|
|
|
|
```json Respuesta
|
|
{ "status": "success" }
|
|
```
|
|
|
|
</ResponseExample>
|
|
````
|
|
|
|
<div id="properties">
|
|
## Propiedades
|
|
</div>
|
|
|
|
Tanto `<RequestExample>` como `<ResponseExample>` aceptan las siguientes propiedades:
|
|
|
|
<ResponseField name="dropdown" type="boolean">
|
|
Mostrar un menú desplegable de idiomas para alternar entre bloques de código, en lugar del diseño de pestañas predeterminado.
|
|
</ResponseField>
|