视图
创建可根据读者选择的框架或语言自动适配的文档。整个章节会根据用户选择切换。
视图会切换页面的整个章节，以匹配读者选择的框架或语言。标签页会并排显示各选项。视图会完全隐藏未选中的内容。当不同框架之间的整个章节存在差异时，请使用视图。
在以下情况使用视图：
- 整个页面章节因框架而异（不仅仅是代码片段）
- 教程针对不同技术有不同的步骤
- 入门指南因平台而异
基本用法
为不同语言创建视图：
<View title="JavaScript" icon="js">
This content is only visible when JavaScript is selected.
```javascript
console.log("Hello from JavaScript!");
```
</View>
<View title="Python" icon="python">
This content is only visible when Python is selected.
```python
print("Hello from Python!")
```
</View>工作原理
包含 View 组件的页面工作方式如下：
- 内容顶部会出现一个下拉选择器
- 读者通过下拉菜单在各视图之间切换
- 仅显示所选视图的内容
View、Tabs 与 CodeGroup 的区别
| 组件 | 最适用于 | 作用范围 |
|---|---|---|
| 视图 | 因框架而异的整个章节 | 全页面内容切换 |
| 标签页 | 快速比较、包管理器 | 行内内容切换 |
| CodeGroup | 多种语言中的相同操作 | 仅代码块 |
示例场景：
- "使用 npm 与 yarn 安装" → 标签页（差异较小）
- "JavaScript fetch 与 Python requests" → CodeGroup（代码对比）
- "React 教程与 Vue 教程" → 视图（整个章节不同）
属性
在下拉选择器中显示的标题。在页面内必须唯一。
Font Awesome 图标、图标的 URL 或图标的相对路径。
仅适用于 Font Awesome 图标。可选值：regular、solid、light、thin、sharp-solid、duotone、brands。