mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
6de9f09f3a
* docs: fix config keys, MCP URLs, and coverage gaps * docs: mirror PR changes into es, fr, zh translations * Updated mintlify pages - Updated index.mdx Mintlify-Source: dashboard-editor * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
81 lines
2.7 KiB
Plaintext
81 lines
2.7 KiB
Plaintext
---
|
||
title: "视图"
|
||
description: "使用 view 组件为不同编程语言、框架或配置方案创建可切换的内容面板。"
|
||
keywords: ["选择器", "特定语言内容", "内容切换"]
|
||
boost: 3
|
||
---
|
||
|
||
使用 `View` 组件来创建会根据多视图下拉菜单中所选视图而变化的内容。这对于展示面向不同编程语言或框架的代码示例或特定文档特别有用。
|
||
|
||
Mintlify 会根据页面上每个 `View` 组件的 `title` 自动生成多视图下拉菜单。你无需单独配置下拉菜单。每个页面中每个标题只使用一个 `View`：重复的标题会被忽略，没有标题的 `View` 永远不会被渲染。
|
||
|
||
<Tip>
|
||
每种语言在每个页面上只使用一个 `View` 组件。对于因语言不同而步骤不同的操作流程，请使用 [tabs](/zh/components/tabs)；对于因语言不同而代码不同的示例，请使用 [code groups](/zh/components/code-groups)。
|
||
</Tip>
|
||
|
||
<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="example">
|
||
## 示例
|
||
</div>
|
||
|
||
````mdx 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" required>
|
||
用于标识此视图的标题。页面上每个唯一的标题都会成为多视图下拉菜单中的一个选项。
|
||
</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>
|
||
|
||
<ResponseField name="className" type="string">
|
||
应用于视图容器的额外 CSS 类。
|
||
</ResponseField>
|