mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
3bb55a7bbf
* docs: note emoji as an icon option in frontmatter and components * translations * fix emoji examples for Windows * copy edits --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
73 lines
2.5 KiB
Plaintext
73 lines
2.5 KiB
Plaintext
---
|
|
title: "View"
|
|
description: "Use the view component to create switchable content panels for different programming languages, frameworks, or configuration alternatives."
|
|
keywords: ["selector", "language-specific content", "content switching"]
|
|
boost: 3
|
|
---
|
|
|
|
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 only appears when you select JavaScript.
|
|
|
|
```javascript
|
|
console.log("Hello from JavaScript!");
|
|
```
|
|
</View>
|
|
|
|
<View title="Python" icon="python">
|
|
This content only appears when you select Python.
|
|
|
|
```python
|
|
print("Hello from Python!")
|
|
```
|
|
</View>
|
|
|
|
## Example
|
|
|
|
````mdx JavaScript and Python views
|
|
<View title="JavaScript" icon="js">
|
|
This content only appears when you select JavaScript.
|
|
|
|
```javascript
|
|
console.log("Hello from JavaScript!");
|
|
```
|
|
</View>
|
|
|
|
<View title="Python" icon="python">
|
|
This content only appears when you select Python.
|
|
|
|
```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 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. Each unique title on the page becomes an option in the multi-view dropdown.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="icon" type="string">
|
|
A [Font Awesome](https://fontawesome.com/icons), [Lucide](https://lucide.dev/icons), or [Tabler](https://tabler.io/icons) icon, a single emoji, a URL to an icon, or a 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>
|
|
|
|
<ResponseField name="className" type="string">
|
|
Additional CSS classes to apply to the view container.
|
|
</ResponseField>
|