mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
6b5350804d
* Fix Vale warnings from recent PRs Generated-By: mintlify-agent * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Update accept.txt * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * update vale config --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
73 lines
2.0 KiB
Plaintext
73 lines
2.0 KiB
Plaintext
---
|
|
title: "Examples"
|
|
description: "Display code blocks in the right sidebar on desktop devices"
|
|
keywords: ["RequestExample", "ResponseExample", "code examples", "request-response"]
|
|
---
|
|
|
|
The `<RequestExample>` and `<ResponseExample>` components display code blocks in the right sidebar to create a two-column layout that keeps examples visible while users scroll through your content. Use these components for API documentation, but they work on all pages.
|
|
|
|
Common use cases:
|
|
|
|
- API endpoint documentation with request and response examples
|
|
- Configuration examples alongside explanatory text
|
|
- Code samples that users reference while following instructions
|
|
- Before and after examples in tutorials
|
|
|
|
On mobile devices, `<RequestExample>` and `<ResponseExample>` components display as regular code blocks that users can scroll past.
|
|
|
|
<RequestExample>
|
|
|
|
```bash Request
|
|
curl --request POST \
|
|
--url https://dog-api.kinduff.com/api/facts
|
|
```
|
|
|
|
</RequestExample>
|
|
|
|
<ResponseExample>
|
|
|
|
```json Response
|
|
{ "status": "success" }
|
|
```
|
|
|
|
</ResponseExample>
|
|
|
|
## RequestExample
|
|
|
|
Use `<RequestExample>` to pin code examples in the right sidebar. This component works similarly to the [CodeGroup](/components/code-groups) component, but displays the code in the sidebar instead of inline.
|
|
|
|
You can include multiple code blocks inside a single `<RequestExample>`. Each code block must have a title attribute.
|
|
|
|
````mdx RequestExample
|
|
<RequestExample>
|
|
|
|
```bash Request
|
|
curl --request POST \
|
|
--url https://dog-api.kinduff.com/api/facts
|
|
```
|
|
|
|
</RequestExample>
|
|
````
|
|
|
|
## ResponseExample
|
|
|
|
The `<ResponseExample>` component pins code examples in the right sidebar beneath any `<RequestExample>` content on the same page.
|
|
|
|
````mdx ResponseExample
|
|
<ResponseExample>
|
|
|
|
```json Response
|
|
{ "status": "success" }
|
|
```
|
|
|
|
</ResponseExample>
|
|
````
|
|
|
|
## Properties
|
|
|
|
Both `<RequestExample>` and `<ResponseExample>` accept the following properties:
|
|
|
|
<ResponseField name="dropdown" type="boolean">
|
|
Display a language dropdown menu for switching between code blocks, instead of the default tab layout.
|
|
</ResponseField>
|