mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
9571a27c7d
* Update components/view.mdx * Update components/view.mdx --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
68 lines
2.3 KiB
Plaintext
68 lines
2.3 KiB
Plaintext
---
|
|
title: "View"
|
|
description: "Create multi-view content for different programming languages or frameworks."
|
|
keywords: ["selector", "language-specific content", "content switching"]
|
|
---
|
|
|
|
Use the `View` component to create content that changes based on the selected view in a multi-view dropdown. This is particularly useful for showing code examples or documentation specific to different programming languages or frameworks.
|
|
|
|
<Tip>
|
|
Use one view component per language per page. Use [tabs](/components/tabs) for procedures that differ by language and [code groups](/components/code-groups) for code examples that differ by language.
|
|
</Tip>
|
|
|
|
<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>
|
|
|
|
## Example
|
|
|
|
````mdx JavaScript and Python views
|
|
<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>
|
|
````
|
|
|
|
## Table of contents behavior
|
|
|
|
The table of contents automatically updates to show only the headings for the currently selected view. When you switch between views using the multi-view dropdown, the table of contents refreshes to display the relevant headings for that view.
|
|
|
|
If you have different heading structures in each view, users will only see the headings that are relevant to their selected language or framework.
|
|
|
|
## Properties
|
|
|
|
<ResponseField name="title" type="string" required>
|
|
The title that identifies this view. Must match one of the options in the multi-view dropdown.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="icon" type="string">
|
|
A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="iconType" type="string">
|
|
For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
|
|
</ResponseField>
|