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>
76 lines
2.4 KiB
Plaintext
76 lines
2.4 KiB
Plaintext
---
|
|
title: "Examples"
|
|
description: "Display code examples in the right sidebar panel on desktop devices to show request and response samples alongside API documentation."
|
|
keywords: ["RequestExample", "ResponseExample", "code examples", "request-response"]
|
|
boost: 3
|
|
---
|
|
|
|
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.
|
|
|
|
The sidebar panel has a fixed width that you cannot configure. If you want a code example to span the full content width instead, use a regular code block or a [CodeGroup](/components/code-groups) in the main content rather than wrapping it in `<RequestExample>` or `<ResponseExample>`.
|
|
|
|
<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>
|