---
title: 面板
description: >-
  使用 Panel 将警告或快速参考等自定义内容固定在侧边栏中，让读者滚动时始终可见。
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Panel 可让你在右侧边栏中显示自定义内容，而不是默认的目录。读者滚动浏览页面时，内容会始终可见。你可以将其用于需要始终显示的信息，例如快速参考、重要警告或支持链接。

在以下情况下使用 Panel：
- **关键信息**不应滚出视野
- **快速参考**材料可补充主要内容
- **持久的行动号召**需要保持可见（支持链接、API 密钥）

<Panel>

<Note>

此注释会显示在侧边栏面板中！

</Note>

<Tip>

向下滚动即可看到面板保持可见。

</Tip>

</Panel>

## 基本用法

将任意内容包裹在 Panel 中，即可使其显示在右侧边栏：

```mdx
<Panel>
  <Info>This content appears in the sidebar!</Info>
</Panel>
```

## 常见使用场景

Panel 适用于固定显示警告、快速参考卡片和支持链接：

```mdx
<Panel>
  <Warning>
    API rate limits: 100 requests/minute
  </Warning>
  <Card title="Quick Reference" icon="list">
    **Methods:** GET, POST, PUT, DELETE
    **Auth:** Bearer token required
  </Card>
  <Card title="Need Help?" icon="circle-question" href="https://example.com/support">
    Contact our support team
  </Card>
</Panel>
```

## 不应使用 Panel 的情况

- **简短页面** - 目录可帮助用户导航；只有在你有更有价值的内容时，才应替换目录
- **标准文档** - 大多数页面使用默认目录效果更好
- **移动端用户** - Panel 内容在较小屏幕上会隐藏，因此请确保关键信息也显示在主要内容中

## 行为

- 在桌面设备的右侧边栏中显示（1280px 及以上），在较小屏幕上隐藏
- 每页只能使用一个 Panel；它会完全替代目录
- 支持任意组件：Callouts、Cards、CodeGroup、Accordions 等

## 接下来？

<Columns cols={2}>
  <Card title="组件概览" icon="puzzle-piece" href="/cn/components/overview">
    浏览所有可用组件
  </Card>
  <Card title="MDX 基础" icon="file-code" href="/cn/content/mdx-basics">
    了解如何在 MDX 中使用组件
  </Card>
</Columns>