---
title: 视图
description: 创建可根据读者的框架或语言选择自适应的文档，整个章节会随用户选择切换。
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
视图可让你创建能够适应读者框架或语言选择的文档。与 Tabs（并排显示多个选项）不同，视图会完全隐藏未选中的内容。当不同框架对应的完整章节存在差异时，这可以让页面更加简洁。
在以下情况下使用视图：
- **完整的页面章节**因框架而异（不仅是代码片段）
- **教程**针对不同技术包含不同步骤
- **入门指南**因平台不同而有显著差异
对于因语言而异的代码示例，请使用 [CodeGroup](/cn/components/code-group)。对于存在细微差异的操作步骤，请使用 [Tabs](/cn/components/tabs)。当**完整章节**专属于不同框架时，请使用视图。
## 基本用法
为不同语言创建视图：
This content is only visible when JavaScript is selected.
```javascript
console.log("Hello from JavaScript!");
```
This content is only visible when Python is selected.
```python
print("Hello from Python!")
```
````mdx
This content is only visible when JavaScript is selected.
```javascript
console.log("Hello from JavaScript!");
```
This content is only visible when Python is selected.
```python
print("Hello from Python!")
```
````
## 工作原理
向页面添加 View 组件后：
1. 内容顶部会显示下拉选择器
2. 用户可以使用下拉菜单在不同视图之间切换
3. 只有所选视图的内容可见
## View、Tabs 与 CodeGroup 的区别
| 组件 | 最适用场景 | 范围 |
|-----------|----------|-------|
| **View** | 因框架而异的完整章节 | 整个页面的内容切换 |
| **Tabs** | 快速比较、包管理器 | 行内内容切换 |
| **CodeGroup** | 使用多种语言执行相同操作 | 仅代码块 |
**示例场景：**
- “使用 npm 还是 yarn 安装” → **Tabs**（差异较小）
- “JavaScript fetch 还是 Python requests” → **CodeGroup**（代码比较）
- “React 教程还是 Vue 教程” → **View**（整个章节存在差异）
## 属性
下拉选择器中显示的标题。在页面内必须唯一。
Font Awesome 图标、Lucide 图标、图标 URL 或图标的相对路径。
仅适用于 Font Awesome 图标。可选值：`regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands`。
## 下一步
浏览所有可用组件
了解如何在 MDX 中使用组件