Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions components/view.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
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

````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 36 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L36

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

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

## 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"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Broken Multilingual Navigation for Documentation

The components/view page was added to the English navigation but is missing from the French, Spanish, and Chinese navigation sections. This creates inconsistent documentation across languages where the View component documentation is only accessible in English, breaking the multilingual documentation structure.

Fix in Cursor Fix in Web

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can ignore. Locadex will update the docs.json when it runs the translation

]
},
"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"
}
}
}
}