View

Views allow you to create content that changes based on user selection. This is useful for showing documentation tailored to different programming languages or frameworks.

Basic usage

Create views for different languages:

<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>

How it works

When you add View components to a page:

1. A dropdown selector appears at the top of the content
2. Users can switch between views using the dropdown
3. Only the selected view's content is visible

With icons

Add icons to help users quickly identify each view:

<View title="React" icon="react" iconType="brands">

  React-specific content with component examples.

  ```jsx
  function App() {
    return <h1>Hello React</h1>;
  }
  ```
</View>

<View title="Vue" icon="vuejs" iconType="brands">

  Vue-specific content with component examples.

  ```vue
  <template>
    <h1>Hello Vue</h1>
  </template>
  ```
</View>

Properties