Skip to content
58 changes: 58 additions & 0 deletions components/view.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
title: "View"
description: "Create multi-view content for different programming languages or frameworks"
---

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.

<View title="JavaScript" icon="js">
This content is only visible when JavaScript is selected.

Check warning on line 9 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L9

In general, use active voice instead of passive voice ('is selected').

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

<View title="Python" icon="python">
This content is only visible when Python is selected.

Check warning on line 17 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L17

In general, use active voice instead of passive voice ('is selected').

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

## Example

<CodeGroup>
```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.

Check warning on line 37 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L37

In general, use active voice instead of passive voice ('is selected').

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

## 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>
11 changes: 6 additions & 5 deletions docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,8 @@
"components/steps",
"components/tabs",
"components/tooltips",
"components/update"
"components/update",
"components/view"
]
},
"create/reusable-snippets",
Expand Down Expand Up @@ -549,7 +550,7 @@
]
},
{
"group": "Documentation de lAPI",
"group": "Documentation de l'API",
"icon": "file-json",
"pages": [
"fr/guides/migrating-from-mdx"
Expand Down Expand Up @@ -581,10 +582,10 @@
]
},
{
"tab": "Référence de lAPI",
"tab": "Référence de l'API",
"groups": [
{
"group": "référence de lAPI",
"group": "référence de l'API",
"icon": "file-json",
"pages": [
"fr/api/introduction"
Expand Down Expand Up @@ -1731,4 +1732,4 @@
"google-site-verification": "YRuJgIxsRnMkiRTYTo_tEsJSFyIE3AraEiukTbeV4Ag"
}
}
}
}