# 视图 (/zh/components/view)

<!-- agent-signals: reading_time_min: 1 · est_tokens: 349 · updated: 2026-07-30 -->
Related: [折叠面板](/zh/components/accordions.md), [徽章](/zh/components/badge.md), [横幅](/zh/components/banner.md), [标注框](/zh/components/callouts.md), [卡片](/zh/components/cards.md), [代码分组](/zh/components/code-groups.md)

使用 `View` 组件来创建会根据多视图下拉菜单中所选视图而变化的内容。这对于展示面向不同编程语言或框架的代码示例或特定文档特别有用。

<Tip>
  每种语言在每个页面上只使用一个 `View` 组件。对于因语言不同而步骤不同的操作流程，请使用 [tabs](/zh/components/tabs)；对于因语言不同而代码不同的示例，请使用 [code groups](/zh/components/code-groups)。
</Tip>

**JavaScript**

只有在选择 JavaScript 时才会显示此内容。

```javascript
console.log("Hello from JavaScript!");
```

**Python**

只有在选择 Python 时才会显示此内容。

```python
print("Hello from Python!")
```

<div id="example">
  ## 示例 [#示例]
</div>

````mdx title="JavaScript and Python views"
<View title="JavaScript" icon="js">
  仅在选择 JavaScript 时显示此内容。

  ```javascript
  console.log("Hello from JavaScript!");
  ```
</View>

<View title="Python" icon="python">
  仅在选择 Python 时显示此内容。

  ```python
  print("Hello from Python!")
  ```
</View>
````

<div id="table-of-contents-behavior">
  ## 目录行为 [#目录行为]
</div>

目录会自动更新，仅显示当前选中的视图中的标题。当你使用多视图下拉菜单在不同视图之间切换时，目录会刷新为该视图显示相应的标题。

如果每个视图中的标题结构不同，用户只会看到与其所选语言或框架相关的标题。

<div id="properties">
  ## 属性 [#属性]
</div>

<ResponseField name="title" type="string">
  用于标识此视图的标题。必须与多视图下拉菜单中的某个选项一致。
</ResponseField>

<ResponseField name="icon" type="string">
  一个 [Font Awesome](https://fontawesome.com/icons) icon、[Lucide](https://lucide.dev/icons) icon、指向 icon 的 URL，或指向 icon 的相对路径。
</ResponseField>

<ResponseField name="iconType" type="string">
  仅用于 Font Awesome 图标：取值为 `regular`、`solid`、`light`、`thin`、`sharp-solid`、`duotone`、`brands` 之一。
</ResponseField>