mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
82605179c5
* add icon info to tabs page * add icons to tabs example * update allowed icon type
70 lines
2.0 KiB
Plaintext
70 lines
2.0 KiB
Plaintext
---
|
|
title: "Tabs"
|
|
description: "Toggle content using the Tabs component"
|
|
icon: "panel-top"
|
|
---
|
|
|
|
Use tabs to organize content into multiple panels that users can switch between. You can add any number of tabs and include other components inside each tab.
|
|
|
|
<Tabs>
|
|
<Tab title="First tab">
|
|
☝️ Welcome to the content that you can only see inside the first tab.
|
|
|
|
You can add any number of components inside of tabs. For example, a code block:
|
|
```java HelloWorld.java
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
</Tab>
|
|
<Tab title="Second tab" icon="leaf">
|
|
✌️ Here's content that's only inside the second tab.
|
|
|
|
This one has a <Icon icon="leaf" /> icon!
|
|
</Tab>
|
|
<Tab title="Third tab">
|
|
💪 Here's content that's only inside the third tab.
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
````mdx Tabs example
|
|
<Tabs>
|
|
<Tab title="First tab">
|
|
☝️ Welcome to the content that you can only see inside the first tab.
|
|
|
|
You can add any number of components inside of tabs. For example, a code block:
|
|
```java HelloWorld.java
|
|
class HelloWorld {
|
|
public static void main(String[] args) {
|
|
System.out.println("Hello, World!");
|
|
}
|
|
}
|
|
```
|
|
</Tab>
|
|
<Tab title="Second tab" icon="leaf">
|
|
✌️ Here's content that's only inside the second tab.
|
|
|
|
This one has a <Icon icon="leaf" /> icon!
|
|
</Tab>
|
|
<Tab title="Third tab">
|
|
💪 Here's content that's only inside the third tab.
|
|
</Tab>
|
|
</Tabs>
|
|
````
|
|
|
|
## Properties
|
|
|
|
<ResponseField name="title" type="string" required>
|
|
The title of the tab. Short titles are easier to navigate.
|
|
</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>
|