mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4b465465dd
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
76 lines
2.1 KiB
Plaintext
76 lines
2.1 KiB
Plaintext
---
|
|
title: "示例"
|
|
description: "在桌面设备右侧边栏面板中展示代码示例，与 API 文档并排显示请求和响应样本。"
|
|
keywords: ["RequestExample", "ResponseExample", "code examples", "request-response"]
|
|
boost: 3
|
|
---
|
|
|
|
`<RequestExample>` 和 `<ResponseExample>` 组件会在右侧边栏显示代码块，形成双栏布局，使用户在滚动阅读内容时始终能看到示例。请将这些组件用于 API 文档，但它们适用于所有页面。
|
|
|
|
常见用例：
|
|
|
|
* 带有请求与响应示例的 API 端点文档
|
|
* 与说明性文字并列的配置示例
|
|
* 供用户在按步骤操作时参考的代码示例
|
|
* 教程中的前后对比示例
|
|
|
|
在移动设备上，`<RequestExample>` 和 `<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>
|
|
|
|
使用 `<RequestExample>` 将代码示例固定在右侧边栏。该组件与 [CodeGroup](/zh/components/code-groups) 类似，但会在侧边栏显示代码，而非内联展示。
|
|
|
|
你可以在一个 `<RequestExample>` 中包含多个代码块。每个代码块都必须包含 title 属性。
|
|
|
|
````mdx RequestExample
|
|
<RequestExample>
|
|
|
|
```bash 请求
|
|
curl --request POST \
|
|
--url https://dog-api.kinduff.com/api/facts
|
|
```
|
|
|
|
</RequestExample>
|
|
````
|
|
|
|
<div id="responseexample">
|
|
## ResponseExample
|
|
</div>
|
|
|
|
`<ResponseExample>` 组件会将代码示例固定在右侧边栏，位于同一页面中任意 `<RequestExample>` 的内容下方。
|
|
|
|
````mdx ResponseExample
|
|
<ResponseExample>
|
|
|
|
```json 响应
|
|
{ "status": "success" }
|
|
```
|
|
|
|
</ResponseExample>
|
|
````
|
|
|
|
<div id="properties">
|
|
## 属性
|
|
</div>
|
|
|
|
`<RequestExample>` 和 `<ResponseExample>` 均接受以下属性：
|
|
|
|
<ResponseField name="dropdown" type="boolean">
|
|
显示语言下拉菜单用于在代码块之间切换，而非默认的选项卡布局。
|
|
</ResponseField>
|